reactjs Chrome开发者工具中未显示React选项卡

vq8itlhq 于 2022-11-22 发布在 React

关注(0)|答案(9)|浏览(291)

我已经安装了React开发工具Chrome浏览器扩展。但是我在开发工具中看不到React选项卡，取而代之的是名为“组件”和“探查器”的新选项卡。
我重新安装了扩展，重新启动了浏览器和电脑，在chrome：//extensions/下选中了“允许访问文件URL”。我导航到了一个带有react https://reactjs.org/tutorial/tutorial.html的URL，但react选项卡没有出现。然而chrome插件（react检测器在浏览器的右上角）显示react.js在其中。我如何让React选项卡出现？
我是用“React”：“16.8.6”

reactjs

来源：https://stackoverflow.com/questions/57533450/react-tab-doesnt-appear-in-chrome-developer-tools

9条答案

按热度按时间

3yhwsihp1#

您看不到React选项卡，因为Facebook已更新React DevTools，使其具有组件和探查器选项卡⚛️ Components选项卡与旧版本中React选项卡用途相同从description，
您将在Chrome DevTools中获得两个新选项卡：“️组件”和“分析️器”。
Components选项卡显示页面上呈现的根React组件，以及它们最终呈现的子组件。
这可以从版本4.0.0中看到。

赞(0）回复(0）举报 2022-11-22

guz6ccqo2#

安装扩展后，它没有出现，刷新页面不工作。但closing the tab and reopening it again为我工作

赞(0）回复(0）举报 2022-11-22

k2fxgqgv3#

安装完这个扩展后，你会在你的扩展旁边看到一个类似原子的React图标（通常在屏幕的右上角），如果你的网站不是用ReactJS构建的，这个扩展的图标会变灰，DevTools中也不会有菜单。但是，我建议你尝试更新GoogleChrome并重新安装这个扩展。有时重启电脑会有帮助。

赞(0）回复(0）举报 2022-11-22

vmpqdwk34#

如上述答案所述，React Dev Tools已被“组件和探查器”选项卡所取代，如下图所示。单击“组件”选项卡中的组件名称，右侧将显示有关该组件的更多详细信息，如属性和状态。

赞(0）回复(0）举报 2022-11-22

5lhxktic5#

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

赞(0）回复(0）举报 2022-11-22

siv3szwd6#

如果您正面临这个问题，那么很明显您正在使用React DOM。我从故障排除说明中得到了解决方案。
你只需要加上

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

到index.html的<head>标签。
请注意，您必须在localhost之后输入特定的端口号。
点击chrome中的refresh，你会看到react-devtools扩展颜色变成红色，表示它已经准备好工作了。然后在chrome中打开inspect，你会看到两个组件和profiler选项。

赞(0）回复(0）举报 2022-11-22

d6kp6zgx7#

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

赞(0）回复(0）举报 2022-11-22

9wbgstp78#

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

赞(0）回复(0）举报 2022-11-22

iovurdzv9#

在终端上运行：

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!

格式

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs Chrome开发者工具中未显示React选项卡

9条答案

相关问题

热门标签

最新问答