Description from extension meta
Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023.
Image from store
Description from store
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-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) moop: 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.
- (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..
- (2023-01-09) Mitch (liquidvisual): The experience is beyond dreadful at this point; performance, UX, it's all bad. Hook parsing fails (every time) making it useless for live editing values. The component tree is hard to traverse and visually parse. Text is too small, hit areas are fiddly to click on. I hate all of it.
- (2022-12-26) Matías Bubello (Matt): Funcionaba genial, la última actualización de chrome lo rompió
- (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-09-19) Giuseppe Dicosmo: purtroppo non funziona con browser Microsoft Edge Unfortunately it doesn't work with Microsoft Edge browser
- (2022-09-15) Yoy Piur: This does not work, in Macs?
- (2022-09-11) Dragos: 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
- (2022-09-06) Alejandro Vera Valdés: No funciona en Chrome
- (2022-08-21) Ryan Shea: 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.
- (2022-08-02) Laura Leger: Very useful. I use it almost every day! This is a must have for any type of web developer.
- (2022-07-27) Arichy X: Hook parsing failed. It's very annoying, please fix it
- (2022-07-02) Ольга Волошенко: Very nice. Everything works.
- (2022-06-24) Ahmet Can Kocaman (Yghh Gggg): eski versiyonu çok daha iyiydi
- (2022-06-19) Kris Graos: dont work =(
- (2022-06-15) Mario Nicolas de Martinis: Stoped working on chrome 102 please fix it, i cant find github repo.
- (2022-06-08) Maica Santos: 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.
- (2022-05-24) Gilles Durys: I can't click on a component to select it, I have to use the keyboard. Sometimes does not detect React.
- (2022-05-23) Firstname Lastname: I have some issues with this extensions. When I opening chrome devtools and starting navigate by react app's routes (react-router-dom) it got freezes. If I disabling this extensions freezes are disappear. Help please.
- (2022-05-22) ᴅᴇʟғɪNa MᴇʀCADO: A m no me sale la tab asi que si alguien sabe que puedo hacer me ayudaría mucho
- (2022-05-17) Jett Teixeira: No funciona en muchas paginas web
- (2022-05-16) moop: This is what React gave us? If someone cannot click on the Components section, click a component, and then use that to easily find that component in their code, they have fundamentally failed at creating a React inspection tool. Vue and Angular allow for easy inspection to code? Why can't this one?
- (2022-05-09) Aakash Shah: Very helpful in developing components with React. Thanks!
- (2022-04-18) Кто то Иван: Для Тилека
- (2022-04-09) Роман Н: я вас ненавижу. я установил это, только чтобы избавиться от дебильного сообщения в логах.
- (2022-04-08) Женя Семенюк: All good? But mby have hot keys for inspector?
- (2022-04-06) Andrei Shuiski: постоянно пропадают вкладки, приходиться перезагружать хром по 10 раз.
- (2022-03-31) Md Shahadat Hossain: good
- (2022-03-25) Vytautas Vasiliauskas: All necessary functions
- (2022-03-23) Leon: 该亮不亮,不该亮亮
- (2022-03-16) 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 .?
- (2022-03-08) Carson Chen: 怎么用不了
- (2022-03-07) Flavio Henrique Vieira: Eu uso muito esta extensão, principalmente como suporte para outras, como o React Context DevTools e o Apollo Client DevTools, mas recentemente esta extensão parou de funcionar em ambientes dev ou local, simplesmente não abre as abas. Já tentei reabrir o chrome, ativar e desativar, habilitar todas opções, limpar cache e nada. Estou usando Ubuntu e a extensão simplesmente parou de funcionar