Adds React debugging tools to the Chrome Developer Tools. Created from revision c7c68ef842 on 10/15/2024.
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
- (2023-11-30) Levon Khachatryan: Cannot use it. Does not work.
- (2023-11-22) Matías Bubello (Matt): Funcionaba genial, la última actualización de chrome lo rompió. Esto lo puse en 2022, es increible que no lo hayan actualizado, no se puede testear en el browers más usado del mundo. En el único lugar donde funciona esta extensión es en firefox
- (2023-11-13) [\]&.!: For everyone experiencing issues with disappearing "tabs" and "profiler," and restarting the browser/system doesn't help. You need to go to Settings > Preferences > Restore Defaults and Reload. Then it'll work.
- (2023-11-07) man wang: 为什么我安装完之后调试工具里没出现components?
- (2023-11-04) Ridian Putra: 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
- (2023-10-16) Denys Galkin: Загрузка процессора 100% chrome-extension //fmkadmapgofadopljbjfkapdkoienihi/build/install
- (2023-10-15) Amr Allam: Not working
- (2023-10-12) Joe Akers-Douglas: Component tab no longer showing
- (2023-10-09) Andrew Spies: No bueno... Doesn't work...
- (2023-10-05) Adam Smith: Not working at all, the component and profiler tab do not show
- (2023-10-04) z l: error "Loading React Element Tree... If this seems stuck, please follow the troubleshooting instructions." and there is no instruction on the issue at all.
- (2023-09-28) John Cullen: Used to work great. It's not been working at all recently.
- (2023-09-21) Ubaldo Suarez: En Chrome linux, especificamente en distros basadas en .deb esta extension falla, se queda trabada y es incapaz de construir el arbol de componentes
- (2023-09-13) guangzan wang: 稍大点的项目就能卡死,还是 M1 Pro 上,想象不到设备性能差的选手用这东西多痛苦
- (2023-09-11) Mahdi Abdurrahman: Does not work with Jetbrains IDEs
- (2023-09-01) Melany Coto: No esta funcionando aún la extensión, en algún momento lo hará?
- (2023-08-27) Joseph Musembi: I always have to uninstall and reinstall the extension every week.
- (2023-08-26) Rohan Arya: Full of errors especially slow loading/never loading and this: Loading React Element Tree... If this seems stuck, please follow the troubleshooting instructions.
- (2023-08-21) iws: 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.
- (2023-07-31) Suzan Sucro: 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.
- (2023-06-28) Maciej Figat: Really buggy lately. It slows me down considerably. Stops working randomly. Today I encountered yet another bug and it just shows nothing.
- (2023-06-09) D RnMss: Not working for React 18
- (2023-06-05) Rakesh Joshi: Love this extension. Amazing Extension.
- (2023-05-07) Andrii Bas: 🔥🔥🔥
- (2023-05-03) Gabryell Pedroso (Developer): Excelente extensão para auxiliar o desenvolvimento de plataformas construidas em React.
- (2023-04-13) Vijay Kumar: After latest update, It stops working, if anyone knows solution please please provide solution
- (2023-04-11) Yerko Antonio Medina Pichún: Antes funcionaba super bien, ahora ya no aparece
- (2023-04-11) Alex Zander: Cannot use on Dev page defeats all purpose Like it
- (2023-04-09) Abhishek Jaiswal: 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?
- (2023-04-05) Andric Alfaro: No me aparece
- (2023-03-29) Muhammad Mudassar: 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.
- (2023-03-27) Cole Nelson: 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!
- (2023-03-16) Javier Melero: 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.
- (2023-03-15) Andrew Zerr: 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.
- (2023-03-08) Leanne Goldsmith: 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
- (2023-02-28) Ramesh Reddy Pathakunta: 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.
- (2023-02-17) Jason Wisener: useless
- (2023-02-13) Fit Sherlockian: thx
- (2023-01-30) Jack Scott: 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.
- (2023-01-23) Julien Tavernier: Dommage que cette extension déclenche des alertes dans la console et notamment concernant les performances..
- (2022-12-21) Mariela Insaurralde: Era muy util hasta que dejo de funcionar. Corregirlo por favor!
- (2022-12-14) Абу Хурайра: Во избежание серьезных проблем не рекомендую использовать
- (2022-12-03) Vitalii Onyshchenko: Since last update stopped working in Chrome v.100.
- (2022-11-01) daniel chukwu: 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
- (2022-10-21) Zephyrus Koryami (Nite Skye): 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.
- (2022-09-27) Paul Barber: 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!
- (2022-03-16) Pillar Benedetti Vasconcellos Luz: Atualização recente impossibilitou o uso. Não funciona mais.
- (2022-03-12) Oluwatobiloba Yusuf: 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?
- (2022-03-09) Simon Siefke: 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.
- (2022-03-08) shyam chinna: 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 .?
Statistics
Installs
5,000,000
history
Category
Rating
3.9732 (1,568 votes)
Last update / version
2024-10-16 / 6.0.1 (10/15/2024)
Listing languages
en