问题
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"
回答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
回答2:
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.
回答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.
回答4:
On your terminal run npm install -g serve And then run serve -s build your 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!
来源：https://stackoverflow.com/questions/57533450/react-tab-doesnt-appear-in-chrome-developer-tools