React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision 5d87cd2244 on 7/4/2025.
React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.
You will get two new tabs in your Chrome DevTools: "Components ⚛" and "Profiler ⚛".
The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.
By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.
If you inspect a React element on the page using the regular Elements tab, then switch over to the React tab, that element will be automatically selected in the React tree.
The Profiler tab allows you to record performance information.
This extension requires permissions to access the page's React tree, but it does not transmit any data remotely. It is fully open source, and you can find its source code at https://github.com/facebook/react/tree/master/packages/react-devtools-extensions.
Latest reviews
Sooo limited features (compared to Vue devtools) makes it almost useless
This is a great extension, especially when used together with Pixel Perfect Pro – they complement each other well.
unable to disable the "Download the React DevTools for a better development experience" console.info spam
Here we go again...
excellent
This is going to be amazing! Thank you.
great and excellent
good tool
Amazing Tool for Developers.
When next-intl is enabled and an incorrect translation key is used, it triggers an infinite loop of errors, such as: IntlError: MISSING_MESSAGE: Could not resolve 'title 123' in messages for locale 'en'. React Strict Mode disabled In a regular browser session, the console gets flooded with these errors, while in incognito mode, only two messages appear
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
amazing tool
Disappears from DevTools after first search!
cool
Very glitchy. I'll record one thing on the profiler, and then it will hang. I close it and try to reopen and the profiler no longer appears as an option in chrome dev tools.
Much useful, so impress me
tool no longer showing in dev tools
use show highlights in settings, so it'll work
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..
I like it, so useful
there is no components and profiler in my tab
i will try it now i hope it useful for debuging
its not working
this tool is very useful
Fine.
This tool is very helpful to me as a beginner web developer and i enjoy to work with it.it's great.
a nice tool. it makes debugging easy.
If it doesn't work: don't forget to close and reopen your browser!
very very useful tool
it's good but i am facing a problem when i am using React.memo(...) the component which are not re-rendering also showing highlight why ?
Worked :)
Good One
For those saying the tabs aren't appearing, you have to tinker with it a bit. I closed the inspect window and reopened it. After that, the tabs popped up for me.
no components tab :/
component tab doesn't exist
component selector doesn't work fsr
the extension is sending "postMessage" to web pages unnecessarily and so frequently (every second). I wonder why? It is interfering with my extension, I hope this can be fixed in the coming release this is what is being sent when I console.log(event.data) from my injected script { "source": "react-devtools-content-script", "hello": true }
a great debugging tool
..... NICE 👍
Use it amost every day, bugs like 10% of the time, but opening a new window often fixes the issue
Works like a charm.
amazing dev tool for react developper
A good tool for our project in react.
Very good to develop React applications with confidence and bug-free
great
Nice !
