ReactJS Developer Tools

ReactJSWeb DevelopmentFront End Technology

While building a React application, the most-used Chrome extension for debugging the React application or to solve the error is React Developer Tools which is a free-to-use and opensource chrome extension.

This extension is used to navigate through the nested component tree of the React Components. It takes a lookup into the stored state and the props values and also records the performance information.

Note: This extension also tells whether a page is using the technology stack of ReactJS or not.

How to install

Go to Chrome web store and install React Developer Tools.

When you tap on this extension, it will show if the webpage is using ReactJS or not.

To take a lookup of the component tree of a webpage, go to that webpage and Inspect the application or press Ctrl + Shift + I. It opens the Chrome DevTools and there you will find two tabs - Components and Profiler.

Components − It contains the tree structure of all the components used in the React application.

Profiler − It is used to record the performance information of the React application.

Updated on 18-Mar-2021 11:51:51