React tab doesn't appear in chrome developer tools

reactjs google-chrome-extension google-chrome-devtools react-devtools

39,546

Solution 1

You can't see React tab because, Facebook have updated React DevTools to have Components and Profiler Tabs. ⚛️ Components tab serves same purpose as React tab in older versions. From description,

You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

This can be seen from version 4.0.0. See the release notes here

Solution 2

After installing the extension, it didn't show up, refreshing the page did not work. But closing the tab and reopening it again made it work for me

Solution 3

After installing the extension, you will have a little 'atom-like- react icon next to your extensions (usually top right part of the screen) and if a website wasn't built with ReactJS, this extension sign will be grayed-out and there would be no menu in DevTools. However, I would recommend trying updating GoogleChrome and reinstalling the extension. Sometimes the restart of the computer will help.

Solution 4

After installing the extension, I went to Chrome extensions and enabled the React Developer Tools extension, then it started showing.

Solution 5

If you are facing the problem, then obviously you are using React DOM. I got the solution from troubleshooting instructions.

You just have to add

<script src="http://localhost:3000"></script>

to <head> tag of index.html.

Please note that you have to enter your specific port number after localhost.

Hit refresh in chrome and you will see the react-devtools extension color change into red indicating that it is ready to work . Then open inspect in chrome and you will see the two components and profiler options.

View more solutions

39,546

Author by

thilakshiK

Updated on July 09, 2022

Comments

thilakshiK almost 2 years

I have installed React Developer Tools Chrome browser extension. But i cannot see the React tab in developer tools instead there are new tabs named "Components" & "Profiler".

I re-installed the extension, restarted the browser and computer, checked "Allow access to file URLs" under chrome://extensions/ . I navigated to a url with react https://reactjs.org/tutorial/tutorial.html & yet react tab doesn't appear. However the chrome plugin (react detector in top right of the browser) indicates that react.js in it. How do I get the React tab to appear ?

I am using "react": "16.8.6"
thilakshiK almost 5 years

I am using latest chrome version. Even the react icon (in top right of the screen) shows the blue & black color, yet i cannot see the react tab in devtools. I also checked the facebook home page but no luck with it
GeorgeWL about 2 years

you obviously didn't read the question