Reviews & Comments of React Developer Tools chrome extension

After latest update, It stops working, if anyone knows solution please please provide solution

Cannot use on Dev page defeats all purpose Like it

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?

From last two days I am facing an error of Dev tools failed in chorom. I have tried reinstalling this extension but still the issue didn't resolved.

It can be flakey sometimes but if you reload the page or recompile your project it fixes itself. It's very handy! If you build in react then this is a MUST!

It does what it says it does - lets you inspect React components, but its flaky as heck. Frequently errors out on me causing the element selection tool to no longer work, causing me to refresh the page. This interrupts my workflow constantly but I'm forced to work with this tool.

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

The rendered by section now shows [email protected] which is useless. It used to show a list of all the parent components when a component is selected.

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 chrome extensions do not work in Incognito mode, which is what most real web developers use to avoid caching issues in development, and they would have never made this. Instead, this lackluster extension was made which doesnt even allow me to properly edit styles.

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.

I don't have that much time but I would like to say that this tool is a must have if you work with react in anyway

I'm using this for school, as recommended by my instructor. His version is old, it seems, because it says on the install page "offered by Facebook" (hence why he recommended it). However, I've been having some issues with it, his inspector tool can pop up a react tab next to the 'element', 'sources', and 'console' drop menu's while mine can't as it does not exist. It could be, perhaps I just don't know how to use the extension in the inspector, but after reading the reviews and seeing there are plenty of negative experiences and problems, so I'm heavy leaning on the fact that this is a dud.

This extension has been becoming increasingly cumbersome and ineffective over the years (especially when hooks were introduced to React) and is verging on being essentially useless. Make React Dev Tools Great Again!

i was writing in vs code and using chrome for local host, and some elements of the app were not working because the add on was causing errors with vs code and so some elements that should do something when clicked were not doing it

My settings aren't being saved. When I reload the page it's back to defaults. Makes it pretty difficult to use without being able to filter out elements.

Very useful. I use it almost every day! This is a must have for any type of web developer.

Hook parsing failed. It's very annoying, please fix it

I've tried uninstalling and reinstalling multiple times, but the tools are completely unavailable and manifests in a blank grey box where the tools should be. They worked a few times before, not sure what happened. I've tried updating my chrome version too. Would love a fix for this problem.

I can't click on a component to select it, I have to use the keyboard. Sometimes does not detect React.

Very helpful in developing components with React. Thanks!

All good? But mby have hot keys for inspector?

good

This does not work again, I keep getting this error message. "This is a restricted browser page. React devtools cannot access this page." Any Help?

Doesn't work at all: 743 Error in event handler: Error: Attempting to use a disconnected port object The issue https://github.com/facebook/react/issues/17649 has been known since 2019 but has been closed.

I don't see the props UI for commit. the right panel in profile tab shows only component name and Rendered at.my react app version is 17+. is there any reason why the props UI is not showing .?

It's good.

Great profiling

Perfect!

If you are developing using this, PLEASE NOTE, it will highly use CPU and memory when on a React website. This can cause other tabs to freeze, notably YouTube: YouTube will freeze when on React websites. This doesn't just happen on websites you are working on, if you go on Scratch (the only example I can think of at the moment), YouTube will freeze as Scratch is made with React today. This caused me to think I was programming badly, losing me weeks of progress, trying to fix the problem when in reality, it's this extension which is the problem. I'd rate it 0 due to this but it does help with development, it's not a necessity in my eyes but it can help a fair amount. Besides from that, it does sometimes just fail to detect React websites, causing you to refresh lots when you need to view something on it. One of the most interesting aspects of it is that it tells you when a website uses React, which can be cool to see, some unexpected sites too... BBC Bitesize.

Before last update it was doing well but now this extention showing like every website was designed by react

good but recently started detecting in sites not using like Youtube and Google docs

It says 'This page doesn’t appear to be using React.' in my REACT APP and I allowed access to file URLs as it's shown on github. doesn't work.

Is it just me or is this extension lately showing incorrect status for websites that're made with React.js? For instance lately it's showing YouTube as This page is using the production build of React. ✅. Also does the same for my university website that hasn't change since a long time but recently this extension shows the same message for my university's website!

Doesn't work after last release

Hi, So I struggled with this same issue for about 30 minutes before figuring it out. I am using the latest Chrome browser too and the latest React developer tools. **You will only see the components when you are browsing a website or page built with React technology.** So for instance, when I am on the Google homepage, I will not see React components button on my dev tools but when I am on the Facebook or React homepage or any other page build with react, I will see the Component and the Profiler buttons in dev tools. The extension button you have on your browser extension bar is just to tell you whether or not the website you are on uses react. I hope this helps. Happy coding. @AnatuGreen

I' impressed

I am using Macbook M1 Air, for some components I am getting a weird issue, the components panel of the devtools on focusing on certain components shows loading (in the pane where state and props are shown) but it never gets loaded no matter how much you wait for

that's cool !

Great for debugging React applications. Only the last version (1-sep-2021) doesn't show the line where a console.log was called.

Great tool for debugging React applications.

useful

In the latest version 4.13.5 (5/25/2021) seems to have a serious bug: When I use Chrome dev tool > Performance, record some page actions, then check the Timings section, many react component's timing are super wide (seems they are reaching to the far right of the browser edge), I believe it was good before this version, now I just want to switch back to earlier version

Just one missing feature, state objects are unnamed so you have to figure out according to their order

The extension doesn't show my component tree

how to install older version of it im unable to do that on chrome

It was good but having some problems on saving preferences like (themes, display density, etc ..) Can anyone help?

it fricked up the dev tools, cant click the exit, select element, or settings button

Note: React Dev Tools won't work if the webpage is opened directly from folder. It will work when the website is opened only through the terminal or command prompt.

I absolutely love this extension, however with a few tweaks they could take the dev experience to a completely different level... here are my suggestions:- 1) Be able to pin components in the inspector panel, so didn't need to drill down to the right component again and again on every change as inspector changes 2) Add better support for the Context API, similar to Redux devtools Thanks

thanks facebook for give us it.

disgusting when compared with vue dev tools

Can Cause Panic Attacks I use this like clockwork, but the other day, my websites looked totally messed up on two machines/browsers, causing ultimate panic until i disabled this extension and re-installed it. Almost unforgivable.

Great tool!

Being a developer, I hate to be criticizing react dev tools. It was working fine until it started to not show the states correctly. I got stuck for literally 1 day trying to figure out why my states werenot changing. then came to realise it was changing but it was only the devtool messing around. Once it is fixed i would love to give it 5 star.

React Developer Tool is not showing up in Inspects even though i enabled the access to url

Works great and is very helpful.

baaka baaka bouu

like it

awsome and nice for debug

great tool

I love it, works perfectly for me

cool.

Loved it great tool!

React dev tool (v4.8.1) is not showing components in depth. Only wrapper components are accessible in the component tab, not child components. which is working fine with older version 4.8.0

good

it has a bug on chrom running on linux ubuntu, sometimes the tabs doens't show

Can't find it in my dev tools

Amazing

Overall, this extension does exactly what you'd expect, and often, even adds a few features that make developing with React and debugging an easier, more pleasant experience. One critic is that the UI can be a bit cluttered at times and a tad confusing/overwhelming if you're new to React and, likewise, this extension.

it does not work

New feature that shows the props , component from root to child is very clear and awesome ! thanks

Very thorough, allows a great way to see data and props in an app. 10/10!

it works

Works, some times and is very buggy. When it works it's great though. A couple examples of the frustrating problems: - Reloading a page can cause the "Components" tap to not load the properties drawer (It just says Loading forever), requiring you to close dev tools, refresh the page, and re-open them. - No ability to add to arrays or objects in the properties drawer. - Issues with the extension crashing when inspecting the react components forcing you to close dev tools, refresh the page and then re-open dev tools.

I love it s much!!

Very useful

Used to work, but a recent update broke everything. The components tab is blank 95% of the time with no errors to track down.

Completely destroyed by their revamp. Absolutely useless. I can only hope someone steps up and creates a better alternative.

So Useful to Inspect

Why can't I modify props any more??

It was great until they decided to completely ruin this by "revamping" it. Now you can't even watch the state changes real-time. Trying to change the state in the components view does nothing. All the old information is invalid because they just *had* to change the entire layout for no reason whatsoever. It is now borderline useless. It may as well not be installed at all. I hope it gets reverted back to its old version, or someone else releases an extension that does what this one is supposed to do; help developers.

Can no more change state values in devtools, what's to use of this extension now?

I have it running for all websites. Would love to have an option to hide the icon

very very nice!! :D

0 prefer the older one, I can only see pains using the latest version

Shout out to Traversy Media for sending me here!

Feature wise it has have lot of features but not easily accessible compared to the previous version. Can you please suggest how can I get the total number of rendering of any specific component? I tried in profiler but didn't find any way.

Sorry guys version 4 usebilty is now worse. We cant find easily our compents anymore. V3 was much more clear in our opinion.

I am updating state in setState() and the page is rendered correctly, but "React Developer Tools" is showing previous state. But when I close the dev tools window ( not switching tabs ) and reopen it, then only it shows the updated state. I don't remember if this was the issue from prev version, but please add realtime state update functionality to it.

Please revert back to old version. New update is just annoying to use.

The extension now replaces native browser "console.warn()" with their own version of "console.warn()" which not just displays your message but also spits out a pile of useless debugging junk. This is super intrusive.

Looks like other extension (reactime) somehow is breaking this extension, after removing reacttime all is good now.

It does not work

took away the only useful feature, showing the components that have re-rendered

It shows "Welcome to the New React DevTools" on every reload and every time launched. Please turn this off!

good

It frequently get corrupted and need to repair(reinstall)

Excellent!

It shown "Welcome to the new React DevTools!" tips every time when the webpage reloaded!!!

Dislike the recent change to the user interface

The original React Dev Tools was much better. This is too slow and buggy. Does not even display the child rendered components which are created dynamically.

this new extension doesnt load the component elements as it used to do it before. i can only see state and props but i can't really inspect the react elements

The latest version doesn't really work and the components viewer is so much worse than before.

I am disappointed that v4 removed "Highlight update" feature and there's no way to easily debug performance issue for old version of React.

loving it learning new stuffs From Tamil Nadu

latest update is really annoying. Profiler sucks now

This update took a great tool and turned it into a blob of junk. Please roll back.

The previous version worked wya better, this is not even almost na improvement

Previous one is better than this. New extension takes 200% more time to debug. I wonder how easily released an useless version to developers to kill their golden times.

So much easier than previous one love it