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

Question

我正在调试使用React.js的应用程序,Chrome Extensions列表清楚地显示安装了React Developer Tools,当我访问React网站http://facebook.github.io/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扩展并选中"允许访问文件URL".

Answer 2

你不再需要做任何事情.

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

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

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

Answer 3

对于版本4.27.1 (12/6/2022)，我遇到的唯一限制是 Chrome DevTools 中现在显示的 React 选项卡。为了解决这个问题，我做了以下操作

1. 打开 Chrome 开发者工具

   • 和F12

   • 或者CTRL+ Shift+I

   • 或者右键单击，然后选择Inspect

   

2. 访问Settings>Preference

   • 按开发者控制台右上角的齿轮图标

   

   • 和F1

   • 或Shift+?

3. 按底部的按钮Restore defaults and reload。

   

4. 现在“Profiler”和“Components”选项卡都应该出现（如果没有出现，请考虑重新启动 Chrome）

   

笔记：

• 与Curtis Yallop 提到的相反，我无需打开“允许访问文件 URL”即可实现此功能。

• 如果希望扩展程序在私有模式下运行，则必须授予权限。为了那个原因

  1. 使用权chrome://extensions/

  2. 点击Details

  

  3. 切换选项Allow in Incognito。