React dev tools for desktop app

Development
1

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.

2

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

3

Extension: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

image
image1641×934 69.6 KB

Screenshot of the extension

Installing it in Electron: DevTools Extension | Electron

4

I meant this part

or this

5

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

Joplin_qH55WhMVeD
Joplin_qH55WhMVeD1476×793 28.4 KB

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.

6

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)

image
image987×740 61.3 KB

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                                                                                                                                                         
gui/NoteListItem/NoteListItem.tsx
83:                     'note-list-item-wrapper',

gui/NoteListItem/NoteListItem.js
54:            'note-list-item-wrapper',

gui/NoteListItem/utils/useItemElement.ts
14:             element.className = 'note-list-item';

gui/NoteListItem/utils/useItemElement.js
12:        element.className = 'note-list-item';

gui/NoteListItem.tsx
166:            item.is_todo ? 'todo-list-item' : 'note-list-item',

gui/NoteListItem.js
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.

2 Likes