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

IT技术 javascript google-chrome reactjs
2021-04-01 01:24:55

我正在调试一个使用 React.js 的应用程序，Chrome 扩展列表清楚地显示已安装 React Developer Tools，当我在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 Developer Tools 吗？

谢谢！

5个回答

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

这修复了错误，但不会真正显示 React 选项卡；这需要一个网络服务器：github.com/facebook/react-devtools/issues/172
2021-05-28 01:24:55
这适用于最新的 ReactJs 版本 0.13.3。所以，在你勾选Allow access to file URLs选项之后。您还需要关闭选项卡并再次重新打开该选项卡（如果您想再次重新打开所有当前选项卡，请重新启动 chrome）。
2021-06-06 01:24:55
使用 webpack-dev-server 访问localhost:8080/webpack-dev-server/. 但是，如果我访问localhost:8080它，它确实会出现。我想与 iframe 相关的东西。我会在上述 github 问题线程上发表评论。
2021-06-07 01:24:55
我在 64 位 linux mint 上，按照上面的说明进行操作，并且我的允许访问文件 URL 被选中，我打开它然后我的 React 选项卡出现了。标记这个对我来说是正确的，因为我指出了正确的方向，我只是做了相反的事情，它对我有用。
2021-06-11 01:24:55

您不再需要做任何事情。

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

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

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

@FakeRainBrigand，您能具体说说我需要在哪个文件中编写代码行吗？
2021-06-05 01:24:55
它只是用作 if 语句的简短版本。你评论中的每一个断言都是不正确的。它可以详细地写为if ((typeof window) !== "undefined") window.React = React;. typeof具有比 更高的优先级!==，在 && 之后有一个赋值，并且boolean会引用一个名为 的变量boolean，这会导致一个 ReferenceError。
2021-06-06 01:24:55
使用完全相同的字符数，您可以使其更具可读性：if (typeof window !== 'undefined') window.React = React- 还是我错过了其他东西？
2021-06-10 01:24:55
谢谢！这让 React 选项卡出现。我稍微修饰了一下（我使用的是 Coffeescript）：如果 typeof window 不是“未定义” window.React = React window.onload = -> React.renderComponent App(null), document.getElementById("container") return
2021-06-14 01:24:55
这个声明究竟有什么作用？我的解释是：typeof window !== "undefined" && (window.React = React)归结为（假设 React 已加载）：typeof true && true即typeof true. 这是boolean. w3schools.com/js/js_datatypes.asp那么这与将文本：boolean放在我的主源文件的顶部是否相同？
2021-06-20 01:24:55

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

如果你成功了，你能回来报告吗？实际上，我可能会为此提出一个单独的问题。有许多线程毫无乐趣地打开：github.com/facebook/react-devtools/issues/91 github.com/atom/electron/issues/915
2021-06-03 01:24:55
好的..当我调试我的应用程序时，React 选项卡没有出现，所以似乎我必须以某种方式修改我的应用程序才能让工具识别出正在使用的 React。
2021-06-19 01:24:55

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

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

如果您在本地运行 react app，则必须

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

    npm install -g react-devtools

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

其它你可能感兴趣的问题
上一篇构建/编译/部署 ReactJS 到生产的最佳方法 下一篇推送新 URL 时多次调用 React 组件渲染