React Developer Tools is a Chrome DevTools extension for the React JavaScript library. A very useful tool, if you are working on React.js applications. This extension adds React debugging tools to the Chrome Developer Tools. It helps you to inspect and edit the React component tree that builds the page, and for each component, one can check the props, the state, hooks, etc.
React Developer tool also helps you to know whether in a particular application React.js has been used or not. It is also available in Firefox.
How to Add the Extension?
Follow the link React Developer Tools
- Click on Add to Chrome.
- The tool has been added to your Chrome.
- Go to the Extensions Tab at the right on the top, click on it. On the dropdown, one can see that the extension has been added.
To remove the extension you will have to click on Remove from Chrome.
How to Use The Extension?
Detecting whether the application uses React.js
Open the application you want to check, now click on the extension tab and then on the React Developer Tools. If the extension remained colorful that means it is built with React.js and if it’s colorless then that means the application hasn’t use React.js
Inspecting and Editing React Components
On the application, right-click, from the dropdown go to Inspect or type Ctrl+Shift+I. It opens the Chrome DevTools, now on the top bar click on the double arrows, a dropdown shall open like this.
Clicking on the Components, the React Component tree will show up.
Here, one can inspect, edit the props, the state, understand the structure.
Similarly, clicking on Profiler.
Clicking on profiler will allow you to record performance information.
