React dev tools for desktop app

It would be great if React devtools extension is added for development purposes. Currently the desktop app is huge in terms of components, and it is very hard to try and map HTML elements to their corresponding JSX elements. React devtools would display the JSX Elements directly and make it much simpler to understand the system and its components.

BTW, if you have tips on how to traverse the huge component structure and deal with it, please share.

Not sure I understand the issue, do you have a concrete example?


Screenshot of the extension

Installing it in Electron: DevTools Extension | Electron

I meant this part

or this

Let's say I wanted to do edits in this component:

I don't know what component it is. I will probably have to guess which Component it is (picking from all the component files in the project) and do some tests to confirm. It gets even harder for more deeply-nested components, and may require to evaluate and understand a big portion of components first to know what you're looking for.

If I had React Devtools installed, I would just use the extension and click on the component and it will show me the component's name and so I would easily know which file I have to change. This is especially valuable for new-comers, also helpful for other purposes like viewing the props and status of the component.

You don't need to guess. Here's how I would do it. Open dev tools and pick the element. (Not sure if I picked the exact one you highlighted but the general idea is the same)

Note that is has this class: note-list-item.

Now off to the repo we go and do a full-text search (I omitted some obviously irrelevant results like CSS or tests):

~/dev/joplin/packages/app-desktop $ rg note-list-item                                                                                                                                                         
83:                     'note-list-item-wrapper',

54:            'note-list-item-wrapper',

14:             element.className = 'note-list-item';

12:        element.className = 'note-list-item';

166:            item.is_todo ? 'todo-list-item' : 'note-list-item',

130:        item.is_todo ? 'todo-list-item' : 'note-list-item',

And from there it's not hard to find the exact element.

Now, I'm not saying I'm against adding this tool (I don't have any opinion on the matter). I just want to point out that it may be good to learn the basics first before using more complex tools.
When dealing with large unfamiliar codebase, full-text search is your best friend, so it makes sense to get some practice using it.