React 选项卡未出现在 chrome 开发人员工具中答案

【问题标题】：React tab doesn't appear in chrome developer toolsReact 选项卡未出现在 chrome 开发人员工具中
【发布时间】：2019-12-23 07:10:03
【问题描述】：

我已经安装了 React Developer Tools Chrome 浏览器扩展。但是我在开发人员工具中看不到 React 选项卡，而是有名为“组件”和“分析器”的新选项卡。

我重新安装了扩展程序，重新启动了浏览器和计算机，检查了 chrome://extensions/ 下的“允许访问文件 URL”。我导航到一个带有反应https://reactjs.org/tutorial/tutorial.html 的网址，但反应选项卡没有出现。但是 chrome 插件（浏览器右上角的反应检测器）表明其中有 react.js。如何让 React 选项卡出现？

我正在使用“反应”：“16.8.6”

【问题讨论】：

正如Dan 建议的那样，我必须在安装扩展程序后重新启动 Chrome 才能显示其标签。
我必须关闭并重新启动 Chrome 才能看到添加的标签

标签： reactjs google-chrome-extension google-chrome-devtools react-devtools

【解决方案1】：

在终端运行：

npm install -g serve

然后运行：

serve -s build

你会发现一个新的 localhost 地址，像这样的 react 开发工具工作的地方：

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

【讨论】：

【解决方案2】：

我也在使用最新的 Chrome 浏览器和最新的 React 开发者工具。 您只会在浏览使用 React 技术构建的网站或页面时看到这些组件。 因此，例如，当我在 Google 主页上时，我不会在我的开发工具上看到 React 组件按钮，但是当我在 Facebook 或 React 主页或任何其他使用 react 构建的页面上时，我会看到 Component 和 Profiler 按钮在开发工具中。您浏览器扩展栏上的扩展按钮只是告诉您您所在的网站是否使用反应。

【讨论】：

【解决方案3】：

安装扩展后没有显示，刷新页面也没有用。但是closing the tab and reopening it again 让它对我有用

【讨论】：

【解决方案4】：

如果您遇到问题，那么显然您正在使用 React DOM。我从troubleshooting instructions得到了解决方案。

你只需要添加

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

到index.html的<head>标签。

请注意，您必须在localhost 之后输入您的特定端口号。

在 chrome 中点击刷新，您将看到 react-devtools 扩展颜色变为红色，表示它已准备好工作。然后在chrome中打开inspect，你会看到两个组件和profiler选项。

【讨论】：

【解决方案5】：

安装完扩展后，我去 Chrome 扩展并启用了 React Developer Tools 扩展，然后它就开始显示了。

【讨论】：

【解决方案6】：

正如上面的答案中提到的，React Dev Tools 已被 Components 和 Profiler 选项卡取代，如下图所示。单击“组件”选项卡中的组件名称会显示有关该组件的更多详细信息，例如右侧的道具和状态。

【讨论】：

【解决方案7】：

您看不到 React 选项卡，因为 Facebook 已将 React DevTools 更新为具有组件和 Profiler 选项卡。 ⚛️ Components 选项卡的用途与旧版本中的 React 选项卡相同。来自description，

您将在 Chrome DevTools 中获得两个新选项卡：“⚛️ 组件”和 “⚛️ 探查器”。

“组件”选项卡向您显示了之前的根 React 组件呈现在页面上，以及它们最终的子组件渲染。

这可以从版本4.0.0 中看出。请参阅发行说明here

【讨论】：

【解决方案8】：

安装扩展后，你的扩展旁边会出现一个类似原子的反应小图标（通常是屏幕的右上角），如果网站不是用 ReactJS 构建的，这个扩展标志将变灰-out 并且 DevTools 中将没有菜单。但是，我建议尝试更新 GoogleChrome 并重新安装扩展程序。有时重新启动计算机会有所帮助。

【讨论】：

我使用的是最新的 chrome 版本。甚至反应图标（在屏幕右上角）也显示蓝色和黑色，但我在 devtools 中看不到反应选项卡。我还检查了 facebook 主页，但没有运气