Question

我正在调试使用React.js的应用程序，Chrome Extensions列表清楚地显示安装了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吗？

谢谢！

Answer 1

如果您在浏览器中打开了本地html文件（文件：// ...），则必须先打开Chrome扩展程序，然后选中“允许访问文件网址”。

Answer 2

您不再需要做任何事情。

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

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

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

Answer 3

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

Answer 4

如果您处于隐身模式，React工具也无法正常工作。可以帮助别人。

Answer 5

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

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

npm install -g react-devtools
并将“React Developer Tools”扩展添加到 chrome

在Chrome浏览器中没有加载开发工具

5 个答案: