反应开发工具未在 Chrome 浏览器中加载

Posted 2023-02-22

【中文标题】反应开发工具未在 Chrome 浏览器中加载

【英文标题】：react dev tools not loading in Chrome browser

【发布时间】：2014-12-08 11:03:22

【问题描述】：

我正在调试一个使用 React.js 的应用程序，Chrome 扩展列表清楚地显示已安装 React 开发工具，当我访问 http://facebook.github.io/react/ 的 React 站点时，我可以清楚地看到“React”选项卡开发者工具窗口。然而，当我调试我的应用程序时，我在控制台中看到了这个：

Download the React DevTools for a better development experience: http://fb.me/react-devtools React.js:87

谁能告诉我如何让它使用 React 开发者工具？

谢谢！

【参考方案1】：

您不再需要做任何事情。

---

对于较旧的 react 版本，主要要求是设置了 window.React。如果您使用的是模块系统：

if (typeof window !== 'undefined') 
    window.React = React;

这通常应该在您的主源文件中完成。

【讨论】：

谢谢！这让 React 选项卡出现了。我稍微修饰了一下（我使用的是 Coffeescript）：如果 typeof 窗口不是 "undefined" window.React = React window.onload = -> React.renderComponent App(null), document.getElementById("container") return跨度>

这个语句到底是做什么的？我的解释是：typeof window !== "undefined" && (window.React = React) 归结为（假设已加载 React）：typeof true && true 即typeof true。这是boolean。 w3schools.com/js/js_datatypes.asp 那么这与将文本：boolean 放在我的主源文件顶部不一样吗？

它只是用作 if 语句的简短版本。您评论中的每个断言都是不正确的。它可以写成if ((typeof window) !== "undefined") window.React = React;。 typeof 的优先级高于!==，&& 后面有一个赋值，boolean 会引用一个名为boolean 的变量，这会导致ReferenceError。

@FakeRainBrigand，你能具体说说我需要在哪个文件中编写代码行吗？

使用完全相同数量的字符，您可以使其更具可读性：if (typeof window !== 'undefined') window.React = React - 还是我遗漏了什么？

【参考方案2】：

即使安装了 React 开发工具并在当前页面上运行，该消息也会始终显示。这将在 0.12 中修复（并且已经在 master 中修复）。见https://github.com/facebook/react/pull/953。

【讨论】：

好的..当我调试我的应用程序时，React 选项卡没有出现，所以看来我必须以某种方式修改我的应用程序才能让工具识别正在使用的反应。

如果你成功了，你能回报吗？实际上，我可能会为此提出一个单独的问题。有多个线程不高兴打开：github.com/facebook/react-devtools/issues/91github.com/atom/electron/issues/915

【参考方案3】：

如果您在浏览器中打开了本地 html 文件 (file://...)，那么您必须首先打开 chrome 扩展并勾选“允许访问文件 URL”。

【讨论】：

我在 linux mint 64 位，按照上面的说明操作，我的允许访问文件 URL 被选中，我打开它，然后我的 React 选项卡出现了。标记这个对我来说是正确的，因为我指出了正确的方向，我只是做了相反的事情，它对我有用。

这适用于最新的 ReactJs 版本 0.13.3。因此，在您勾选 Allow access to file URLs 选项后。您还需要关闭标签并重新打开标签（如果您想再次重新打开所有当前标签，请重新启动 chrome）。

这修复了错误，但并没有使 React 选项卡真正显示出来；需要网络服务器：github.com/facebook/react-devtools/issues/172

使用 webpack-dev-server 访问 localhost:8080/webpack-dev-server/ 时无法出现。但如果我只访问localhost:8080，它确实会出现。我想是 iframe 的东西。我将在上述 github 问题线程上发表评论。

【参考方案4】：

如果您处于隐身模式，React 工具也将无法工作。可能会帮助某人。

【讨论】：

它们确实有效，但您必须允许它在 chrome://extensions/ 下隐身运行，就像其他所有扩展一样

【参考方案5】：

如果你在本地运行 react 应用程序，你必须

安装“react-devtools”（本地运行时bcz chrome不会推断它是React App）

npm install -g react-devtools

并将“React Developer Tools”扩展添加到 chrome