React tab doesn't appear in chrome developer tools

G

10

65

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"

Gmur answered 17/8, 2019 at 5:11 Comment(2)

As Dan suggested I had to restart Chrome after installing the extension for its tabs to show up. – Lug 4/7, 2020 at 16:47

I had to close and restart Chrome to see the added tabs – Ouidaouija 8/9, 2020 at 18:3

N

75

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

Nazar answered 17/8, 2019 at 5:51 Comment(0)

S

73

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

Stichous answered 16/8, 2021 at 15:3 Comment(1)

This is unfortunately the answer more often than not with any third-party devtools extension for me – Bethannbethanne 10/8, 2023 at 19:22

D

10

After installing the React Extension, If you not identify the Components and Profiler tab . Please tried the below option

In Inspect mode-> right corner -> Customize and control Dev Tools (... dots)->settings-> there is a button "Restore defaults and refresh", it helped me

Dionnadionne answered 10/12, 2023 at 7:14 Comment(0)

C

6

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.

Colas answered 17/8, 2019 at 5:18 Comment(1)

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 – Gmur 17/8, 2019 at 5:27

H

3

As mentioned in the above answers React Dev Tools have been replaced by Components and Profiler tab as shown in below image. Clicking on the component name in the Components tab shows the more detailed information about that component like props and state on the right.

Hight answered 12/7, 2020 at 8:14 Comment(0)

C

3

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.

Costello answered 19/7, 2021 at 14:51 Comment(0)

B

2

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

Blow answered 15/4, 2021 at 20:35 Comment(0)

N

0

What did finally work was updating React and ReactDom from version 16.8 to v17.

Neopythagoreanism answered 22/11, 2022 at 11:26 Comment(0)

Z

-1

I am using the latest Chrome browser too and the latest React developer tools. You will only see the components when you are browsing a website or page built with React technology. So for instance, when I am on the Google homepage, I will not see React components button on my dev tools but when I am on the Facebook or React homepage or any other page build with react, I will see the Component and the Profiler buttons in dev tools. The extension button you have on your browser extension bar is just to tell you whether or not the website you are on uses react.

Zollie answered 13/12, 2021 at 0:4 Comment(0)

L

-3

On your terminal run:

npm install -g serve

And then run:

serve -s build

You will find a new localhost address like this where the react development tools works:

  Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.10.131:5000   │
   │                                                    │
   │   Copied local address to clipboard!

Limbic answered 11/11, 2020 at 14:50 Comment(1)

you obviously didn't read the question – Catapult 17/3, 2022 at 11:55

Recommended topics

Hot tags