React 选项卡未出现在 Chrome 开发者工具中

问题描述 投票：0回答：10

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

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

我正在使用“react”：“16.8.6”

reactjs google-chrome-extension google-chrome-devtools react-devtools
10个回答
74
投票

您看不到 React 选项卡，因为 Facebook 已更新 React DevTools 以拥有组件和 Profiler 选项卡。 

⚛️ Components
选项卡的用途与旧版本中的 React 选项卡相同。来自描述，

您将在 Chrome DevTools 中获得两个新选项卡：“⚛️ Components”和 “⚛️ 分析器”。

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

这可以从版本

4.0.0
看出。请参阅发行说明此处

64
投票

安装扩展后没有显示，刷新页面也没用。但是

closing the tab and reopening it again
让它对我有用

6
投票

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

3
投票

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

3
投票

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

您只需添加

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

到

<head>
的
index.html
标签。

请注意，您必须在

localhost
后输入您的具体端口号。

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

2
投票

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

0
投票

最终起作用的是将 React 和 ReactDom 从版本 16.8 更新到 v17。

0
投票

请尝试以下选项 在检查模式->右上角->自定义和控制开发工具（...点）->设置-> 有一个按钮“恢复默认值并刷新”，它帮助了我

-1
投票

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

-3
投票

在终端上运行：

npm install -g serve

然后运行：

serve -s build

您会发现一个新的本地主机地址，如下所示，反应开发工具在其中工作：

  Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.10.131:5000   │
   │                                                    │
   │   Copied local address to clipboard!
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.