Open In App

What is React Developer Tool?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

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

  1. Click on Add to Chrome.
  2. The tool has been added to your Chrome.
  3. 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.

Chrome DevTool

Clicking on the Components, the React Component tree will show up.

Component Window

Here, one can inspect, edit the props, the state, understand the structure.

Similarly, clicking on Profiler

Profiler Window

Clicking on profiler will allow you to record performance information.


Last Updated : 19 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads