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

Question

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

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

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

score 65 · Accepted Answer

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

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

Components 选项卡显示了在页面上呈现的根 React 组件，以及它们最终呈现的子组件。

这可以从版本中看出4.0.0。在此处查看发行说明

score 8 · Accepted Answer

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

score 4 · Accepted Answer

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

如果您遇到问题，那么显然您正在使用 React DOM。我从故障排除说明中得到了解决方案。

你只需要添加

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

<head>标记index.html. _

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

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

在您的终端上运行：

npm install -g serve

然后运行：

serve -s build

你会在 react 开发工具的工作环境中找到一个像这样的新 localhost 地址：

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

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

8 回答 8

Related

Reference