chrome 开发者工具中没有出现 React 选项卡
React tab doesn't appear in chrome developer tools
我已经安装了 React Developer Tools Chrome 浏览器扩展。但是我在开发人员工具中看不到 React 选项卡，而是有名为 "Components" 和 "Profiler" 的新选项卡。
我重新安装了扩展，重启了浏览器和电脑，在 chrome://extensions/ 下勾选了 "Allow access to file URLs" 。我使用 React https://reactjs.org/tutorial/tutorial.html 导航到 url，但没有出现 React 选项卡。但是 chrome 插件（浏览器右上角的反应检测器）表明其中有 react.js。如何让 React 选项卡出现？
我正在使用 "react": "16.8.6"
安装扩展程序后，您的扩展程序旁边（通常在屏幕的右上角）会有一个类似原子的反应图标，如果网站不是使用 ReactJS 构建的，则此扩展程序标志将变灰，DevTools 中将没有菜单。但是，我建议尝试更新 GoogleChrome 并重新安装扩展程序。有时重启电脑会有帮助。
您看不到 React 选项卡，因为 Facebook 已更新 React DevTools 以包含组件和分析器选项卡。 ⚛️ Components 选项卡的作用与旧版本中的 React 选项卡相同。来自 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.
从版本4.0.0可以看出这一点。请参阅发行说明 here
如上述答案中所述，React Dev Tools 已被 Components 和 Profiler 选项卡取代，如下图所示。单击“组件”选项卡中的组件名称会显示有关该组件的更多详细信息，例如右侧的道具和状态。
在您的终端上 运行:
npm install -g serve
然后运行：
serve -s build
你会在 react 开发工具工作的地方找到一个像这样的新本地主机地址：
Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://192.168.10.131:5000 │
│ │
│ Copied local address to clipboard!
安装扩展后，我转到 Chrome 扩展并启用 React Developer Tools 扩展，然后它开始显示。
如果您遇到这个问题，那么显然您使用的是 React DOM。
我从 troubleshooting instructions.
得到了解决方案
您只需添加
<script src="http://localhost:3000"></script>
到 index.html 的 <head> 标签。
请注意，您必须在localhost之后输入您的特定端口号。
在 chrome 中点击刷新，您将看到 react-devtools 扩展颜色变为红色，表明它已准备好工作。然后在chrome中打开inspect，你会看到两个组件和profiler选项。
安装插件后没有显示，刷新页面无效。但是 closing the tab and reopening it again 让它对我有用
我也在使用最新的 Chrome 浏览器和最新的 React 开发人员工具。 只有在浏览使用 React 技术构建的网站或页面时，您才会看到这些组件。
因此，例如，当我在 Google 主页上时，我不会在我的开发工具上看到 React 组件按钮，但是当我在 Facebook 或 React 主页或任何其他使用 React 构建的页面上时，我会看到组件以及开发工具中的 Profiler 按钮。您浏览器扩展栏上的扩展按钮只是告诉您您正在访问的网站是否使用了 React。
我已经安装了 React Developer Tools Chrome 浏览器扩展。但是我在开发人员工具中看不到 React 选项卡，而是有名为 "Components" 和 "Profiler" 的新选项卡。
我重新安装了扩展，重启了浏览器和电脑，在 chrome://extensions/ 下勾选了 "Allow access to file URLs" 。我使用 React https://reactjs.org/tutorial/tutorial.html 导航到 url，但没有出现 React 选项卡。但是 chrome 插件（浏览器右上角的反应检测器）表明其中有 react.js。如何让 React 选项卡出现？
我正在使用 "react": "16.8.6"
安装扩展程序后，您的扩展程序旁边（通常在屏幕的右上角）会有一个类似原子的反应图标，如果网站不是使用 ReactJS 构建的，则此扩展程序标志将变灰，DevTools 中将没有菜单。但是，我建议尝试更新 GoogleChrome 并重新安装扩展程序。有时重启电脑会有帮助。
您看不到 React 选项卡，因为 Facebook 已更新 React DevTools 以包含组件和分析器选项卡。 ⚛️ Components 选项卡的作用与旧版本中的 React 选项卡相同。来自 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.
从版本4.0.0可以看出这一点。请参阅发行说明 here
如上述答案中所述，React Dev Tools 已被 Components 和 Profiler 选项卡取代，如下图所示。单击“组件”选项卡中的组件名称会显示有关该组件的更多详细信息，例如右侧的道具和状态。
在您的终端上 运行:
npm install -g serve
然后运行：
serve -s build
你会在 react 开发工具工作的地方找到一个像这样的新本地主机地址：
Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://192.168.10.131:5000 │
│ │
│ Copied local address to clipboard!
安装扩展后，我转到 Chrome 扩展并启用 React Developer Tools 扩展，然后它开始显示。
如果您遇到这个问题，那么显然您使用的是 React DOM。 我从 troubleshooting instructions.
得到了解决方案您只需添加
<script src="http://localhost:3000"></script>
到 index.html 的 <head> 标签。
请注意，您必须在localhost之后输入您的特定端口号。
在 chrome 中点击刷新，您将看到 react-devtools 扩展颜色变为红色，表明它已准备好工作。然后在chrome中打开inspect，你会看到两个组件和profiler选项。
安装插件后没有显示，刷新页面无效。但是 closing the tab and reopening it again 让它对我有用
我也在使用最新的 Chrome 浏览器和最新的 React 开发人员工具。 只有在浏览使用 React 技术构建的网站或页面时，您才会看到这些组件。 因此，例如，当我在 Google 主页上时，我不会在我的开发工具上看到 React 组件按钮，但是当我在 Facebook 或 React 主页或任何其他使用 React 构建的页面上时，我会看到组件以及开发工具中的 Profiler 按钮。您浏览器扩展栏上的扩展按钮只是告诉您您正在访问的网站是否使用了 React。