React Developer Tools: 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 and it 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 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
- Now click on Add to Chrome.
- Now the tool has been added to your Chrome. To remove the extension click on Remove from Chrome.
After clicking Add to 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.
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
The application built without using React.js
The application built using 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.
Components Window
- 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.
Profiler Window
