Question

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

我重新安装了扩展程序，重新启动了浏览器和计算机，并在chrome：// extensions /下选中了“允许访问文件URL”。我使用react https://reactjs.org/tutorial/tutorial.html导航到了一个URL，但没有出现react选项卡。但是chrome插件（浏览器右上方的反应检测器）指示其中包含react.js。如何显示“反应”选项卡？

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

Answer 1

您看不到React选项卡，因为Facebook更新了React DevTools的组件和Profiler选项卡。 ⚛️ Components标签的作用与旧版本中的React标签相同。从description，

您将在Chrome DevTools中获得两个新标签：“⚛️组件”和   “⚛️Profiler”。

Components标签显示了根React组件   呈现在页面上的元素以及它们最终生成的子组件   渲染。

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

Answer 2

安装扩展程序后，我转到 Chrome 扩展程序并启用 React Developer Tools 扩展程序，然后它开始显示。

Answer 3

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

你只需要添加

<head>

到 index.html 的 localhost 标签。

请注意，您必须在 {{1}} 后输入您的特定端口号。

在 chrome 中点击刷新，您将看到 react-devtools 扩展颜色变为红色，表明它已准备好工作。然后在 chrome 中打开检查，您将看到两个组件和分析器选项。

Answer 4

安装扩展程序后，扩展程序旁边（通常在屏幕的右上角）会出现一个类似于“ atom-like- react”的小图标，如果网站不是使用ReactJS构建的，则该扩展程序标志将显示为灰色-out，DevTools中将没有菜单。但是，我建议尝试更新GoogleChrome并重新安装扩展程序。有时重新启动计算机会有所帮助。

Answer 5

如以上答案所述，React Dev Tools已由Components和Profiler选项卡代替，如下图所示。单击“组件”选项卡中的组件名称，将在右侧显示有关该组件的更详细信息，如道具和状态。

Answer 6

在终端运行 npm install -g服务 然后跑 服务-s构建 您将在React开发工具工作的地方找到一个这样的新本地主机地址。服务！ │ ││ │-本地：http：// localhost：5000│ │-在您的网络上：http://192.168.10.131:5000│ ││ │已将本地地址复制到剪贴板！

chrome开发者工具中未显示“ React”标签

6 个答案: