React Developer Tools

Description from extension meta Adds React debugging tools to the Chrome Developer Tools. Created from revision 3816ae7c3 on 11/27/2019.

Image from store React Developer Tools

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.

Latest reviews (2019-12-06) Christian Asivido: Used to work, but a recent update broke everything. The components tab is blank 95% of the time with no errors to track down. (2019-12-05) Matt: Completely destroyed by their revamp. Absolutely useless. I can only hope someone steps up and creates a better alternative. (2019-12-03) James Gough: Its most useful feature - highlighting updates when components render - no longer works for anyone unfortunate to be stuck with React < 16. (2019-11-22) IC: не работает. Значение в хуках менять невозможно. Имена хуков не показываются. Зря только погнался за новыми API (2019-11-19) Lalchhandama: So Useful to Inspect (2019-11-14) Phil Wells: Slows down some react pages so that they can't even reload. Would be nice to have a disable/enable toggle in the action menu when the icon is clicked in Chrome, rather than having to dive into Chrome extensions to flip the switch. (2019-11-14) Huy Nguyen: loved it (2019-11-10) Matt Dillon: Why can't I modify props any more?? (2019-11-06) Onur Vural: 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. (2019-11-05) Mathieu Campagna: Can no more change state values in devtools, what's to use of this extension now? (2019-10-28) Krzysiek Witczak: The last update made it really difficult to use and it crashes all the time. (2019-10-25) Gökhan Menekşe: The old version was very good and useful, but it became unusable after it was split into 'Components' and 'Profiler'. It was a very bad update. Is there a way to revert to the old version? (2019-10-24) Ramon Balthazar: I have it running for all websites. Would love to have an option to hide the icon (2019-10-23) Greg Dickison: The new version 4.0 was a step backward from the beginning, but the latest version (4.0.6) is completely broken, and "completely" is not an exaggeration. It says that there is no React on a page entirely built in React. If it does stumble upon a component it gets stuck trying to load the state. How was this released three weeks ago and it's still allowed to live? UPDATE: 4.2.0 released October 3 is a huge improvement, in that it actually works. Major redesign over version 3.x, in that it only displays rendered components and removes the inline display of props from the components, placing it all in the sidebar. Thanks for making this useful. (2019-10-18) Arthur Khan: very very nice!! :D (2019-10-18) Irzhy Ranaivoarivony: 0 prefer the older one, I can only see pains using the latest version (2019-10-15) Nintendo爱好者: 访问天猫店铺时（移动端调试），这个插件会直接导致天猫店铺卡住。 (2019-10-10) Sam Azzarano: Shout out to Traversy Media for sending me here! (2019-10-10) Kamil Balda: after last update is one big pice of s.... : | (2019-10-01) Rahul Baruri: 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. (2019-10-01) KY lee: 전버전 사용할려면 어떻게 해야하나요?? (2019-09-30) Matthias Matook: Sorry guys version 4 usebilty is now worse. We cant find easily our compents anymore. V3 was much more clear in our opinion. (2019-09-26) Jonathan Romero: En la última revisión (35bf9d27a), cuando cambio el state desde un input, el state no lo actualiza en tiempo real, hay que volver a seleccionar el componente para ver como ha cambiado. (2019-09-25) Rohan Chaudhary: 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. (2019-09-25) Neal Ray: Please revert back to old version. New update is just annoying to use.