React Developer Tools

I was developing a web app with Next.js 16.1.6 and noticed that Chrome eats my CPU. Using Chrome's Task Manager (Shift+Esc), I noticed that the React Developer Tools extension was the culprit. I disabled the extension and CPU thanked me.

Unusable due to poor performance. Thrashes the CPU and crashes the browser when trying to record a ~5s profile, even on an M2 Pro macbook. I've not been able to use this extension on any non-trivial React app, in fact I've had to disable it entirely to prevent it randomly locking up the whole Chrome devtools window even when not in use. Really hope this tool gets some love (and a complete rewrite for performance)!

continously stuck while using in chrome, need to reinstall every time

Started to randomly overload CPU

unable to disable the "Download the React DevTools for a better development experience" console.info spam

What’s the deal with this required "copy and paste" permission? It states that the extension can modify any data I copy and paste. Am I missing something about why this is necessary to keep the extension enabled? Bizarre. Edit: I found more context about this in their repository if anyone is interested: https://github.com/facebook/react/pull/32077 https://github.com/facebook/react/issues/32244 https://github.com/facebook/react/pull/32262

The copy & paste access is really a madness, think about it: If you have a crypto wallet address copy and then you go to make a transfer on an exchange, they can change that wallet address to another and then you cry.. This can apply for bank transfers and every money transactions. They're crazy release something like that.

Tool just started requesting copy & paste access. Anyone have an idea why it'd need this? I'm disabling for now.

The profiler stops working after the first launch. I tried it on different computers with just vite and react

Disappears from DevTools after first search!

The developer tools aren't showing up with Chromes new update

Many times it gets disappear and I really struggle very hard to get it back. Please do something to fix this..

its not working

no components tab :/

Doesn't work

have downloaded React dev tool extension for chrome but cannot find two new tabs in my Chrome DevTools: "⚛️ Components" and "⚛️ Profiler" as mentioned in description. Not sure what can I do with this extension if nothing shows.

I have downloaded React dev tool extension for chrome but cannot find two new tabs in my Chrome DevTools: "⚛️ Components" and "⚛️ Profiler" as mentioned in description. Not sure what can I do with this extension if nothing shows. Re: I have confirmed that I am using the latest version of Chrome and restarted the browser. I can now find both the options. Thanks Walid.

inactive tool for me

It's inactive for me. Why?

I can't see the "Profiler" and "Components" in my dev tools, what should I do ?

Open in editor is not working, it is there but it is disabled and it is not working. Please fix this

There is a bug in the latest 5.0.2 components component jumping to vscode, but 5.0.0 does not have this problem. The bad thing is that Chrome forces me to update to the latest version every time. This experience is terrible.

Hi Team, Unable to view the source file of the React Application inside of React dev tools. Kindly do the needful. It showing bundle.js as source file. Plz resove this issue asap.

This edited version of react dev tool is not showing the exact source of the component like it used to, it is showing the wrong source that does not even exist in my code, Please fix this. i am building a react app but the profiler says: Looks like this page doesn't have React, or it hasn't been loaded yet. the icon now remains orange where it should be green or blue

not working with vite

not working

It doesn't work

It doesn't work now.

Im using Vite and this doesnt show the components, anybody know any workarounds.

No new tabs?

The options vanished?

i cant see those two function

Been using it since a very long time because it's the official react devtools extension. It's always been a finicky extension. For example the Components tab never highlighted the correct component when using its element picker. Sometimes, it would lose the relevant element when switching between Elements panel and Components panel. It would always lose settings for persist hook memory (they fixed this after a while). And finally, today it has stopped working altogether - the extension popup doesn't open and the Component/Profiler tabs don't show in the devtools console. Removing extension/restarting Chrome nothing works.

Not working properly ! Request to google team, to fix this solution .. thankyou!

I'm sorry, but this extension is not working :') I've tried it in develop or build mode, but it still doesn't work. T_T

Not working

Component tab no longer showing

No bueno... Doesn't work...

Not working at all, the component and profiler tab do not show

error "Loading React Element Tree... If this seems stuck, please follow the troubleshooting instructions." and there is no instruction on the issue at all.

Used to work great. It's not been working at all recently.

Full of errors especially slow loading/never loading and this: Loading React Element Tree... If this seems stuck, please follow the troubleshooting instructions.

This tool has become so buggy in the last ~4 months that it's almost unusable. I've resorted to uninstalling and reinstalling weekly to resolve issues -- when it breaks (which happens completely randomly btw), it's totally broken... no workarounds.

Really buggy lately. It slows me down considerably. Stops working randomly. Today I encountered yet another bug and it just shows nothing.

after intalling the extension i am facing this error ...This page doesn’t appear to be using React. If this seems wrong, follow the troubleshooting instructions. what should i do next?

It's useless.. it's freezing every time with "timed out" errors, it doesn't provide useful information, seeing things like "state... state.. state.. Effect: f().. .Callback.." does not help. I don't know, after so many years it didn't evolved at all. Take a look at vue dev tools, are years ahead of this.

The chrome extension was working fine and I have no errors in my React.js app in my visual studio code terminal. But now when I go to refresh my webpage, I get the error "Loading React Element Tree... If this seems stuck, please follow the troubleshooting instructions." I have read many solutions, but none seem to work for me. Has anyone experienced this issue before and been able to solve it. Solutions I have tried: updated chrome version remove react dev tools extension and reinstall it restarted computer restored to defaults on my inspect tools

useless

Angular and Vue don't need an extension because their frameworks actually work with the native chrome inspector tools. Meanwhile, the developers of React, couldnt make their framework work for the native inspector tools so instead of fixing this, they had the idea to make a work-around which is this extension. If the people who made React developed web applications before in their lives, they would have quickly come to the conclusion that React should work with the native inspector tools and that this extension is a 'band-aid' solution. Instead, this lackluster extension was made which doesnt even allow me to properly edit styles in the inspector. That stacked with some React elements not being able to support native css directive classes, like angular & vue, make React a spectacular example of how React is objectively an inferior framework to Vue and Angular. To the React developers, start over with this framework. When you can't decide if you want a component to be a class or a const, a normal component, or an FC component, so you instead try to support all of them at once, you have fundamentally failed at providing any sort of `frame` to work off of. Decide how you want a component to look like and stick with that. I recommend you look at Angular or better Vue to see how simple a component should be, and go from there. Aug 2023 update: The extension has now ceased to work all together. Selection of Dom elements or seeing them in the browser is now completely broken. It's absolutely baffling that React is the most used frontend framework, when it was developed by people with little to no experience in actual frontend framework development. To answer the person who responded: If you inspect a dom element with angular or react by right clicking it and 'Inspecting' you can see the actual custom dom elements that are in your code (<custom-element />) with the inspector tool that chrome provides. Reacts DOM in that same inspector is a jumbled mess, which is why they made this extension to make elements and components actually inspectable. Unfortunately the developers were a little lazy and the extension has a fraction of the inspection capabilities that chrome's natural inspector already has.

I never use this extension and want to disable it from my project. But when I remove it, I get an annoying console message. When I disable the react devtools global hook (to disable the console log message) I get another console message telling me that my fast refresh is now disabled.