Home

React Developer Tools

Install React Developer Tools

In Chrome to add the React Developer Tool option you need to click on the (top right) 3 dots, to customize and control google chrome.
Then select the More Tools Option
and select Extensions
In here you can search for React Developer Tools and install it.

Then when a page is open that is running a React App you can Right-Click on a blank area of the screen and choose inspect.

There is an Interactive Tutorial that you can look at.

There is also React Document that you can look at.

Using it in Chrome

When a React App is running the Chrome Extension in top right corner (for React Developer Tools, if it is pinned to the bar) will be coloured. It is grey if it is NOT a React App.

If the extension is not displayed you can go in to customize it (select 3 dots top right of chrome, select More Tools/Extensions, find the React Developer Tools App and pin it to the bar)

On an empty section of the web page
RightClick and select Inspect

On the pop-up section there should be a couple of new options
Components
Profiler

when you first do this, check to see if ...
...Select the Components and a new pop-up should appear.
...Select Components on the pop-up
and if a filter shows up click the 'X' to delete it.


Top