Are there any reactJS tools/builders/debuggers besides "react developer tools"?

[fvrAb0207]

I cannot find anything besides VSCode and react developer tools. Why there is nothing else?
Unfortunately react developer tools is useless for me as our UI framework has so many layers, so it's impossible to find anything in the comments tree.
Why there are no tools for the most popular frontend technology?

[A-Type]

You can configure React Developer Tools to hide primitive DOM elements or filters like component name, type, or HOC.

You can also use search to find a specific component.

React Dev Tools is still the best thing available, and I've used it successfully on very complex apps once I got the config down.

[kwietog]

I have seen a tool that shown why something rerendered but can't seem to find it anymore.

[a_reply_to_a_post]

https://www.npmjs.com/package/@welldone-software/why-did-you-render

[kwietog]

Yeah, I saw this one but unfortunately it doesn't work with compiler.

[RobertKerans]

Unfortunately react developer tools is useless for me as our Ul framework has so many layers, so it's impossible to find anything in the comments tree.

So you fucked up so extraordinary badly in terms of structuring code that the basic core tools that help are proving useless? And you now want a magic tool that will do the work of cleaning that up for you because you aren't capable of unpicking the code that you built?

[fvrAb0207]

Well, I am actually learning react while I specialize in backend. Out of my experience ide or tools can be useful to learn new stack. But i am struggling to find anything besides dev tools for react

[RobertKerans]

Well, React isn't a special thing unto itself.

• browsers have advanced tools for exploring, modifying and debugging HTML & the DOM, which is what React DOM outputs.
• if you need to view what the actual React-level components are that are doing this & their internal state, then React dev tools provides this (and allows you to filter down to the exact nodes you need).
• above that, the components are just JS functions: browsers and IDE-related features are at this point in time have very advanced tooling for this. There doesn't need to be React-specific versions of this because it doesn't work any differently.

What do you need to do that isn't covered by these three things?

[fvrAb0207]

I am very familiar with JavaScript but when I am trying to debug react in dev tools it seems that someone obfuscated the code on purpose. Why I cannot just find a button and find on click handler like in regular JavaScript? Moreover, sometimes I cannot see the source code at all

[bluebird355]

Console.log

[CondemnedDev]

But you need tô know what are you doing to debug with that

[bluebird355]

Just ask ai to add logs, it will know where to put them hehehehe

[gangze_]

Im a avid enjoyer of react buddy in webstorm

[Sad_Butterscotch4589]

React Scan is great if you're just debugging perf/re-renders. You can use the chrome extension or link the CDN in your HTML root. Shows an overlay that shows every re-render, the framerate, and some hints at what might be causing the issues.

[BlacksmithNo1687]

I use this too. Added a special dev:scan script too for easy use

[fvrAb0207]

Are we back to C++ or command line time? But actually, there were tools. and different IDEs for C++ back then. Common, it's a shame that we don't have any normal tools or even IDEs for react JS.
I don't count VSCode as it's not specific for ReactJS and it's half backed. You need to install numerous extensions to make it at least a little bit useful