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
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
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.