Chrome浏览器中React Developer Tools不显示问题求助

云上老周

2026-7-6

React Developer Tools 在 Chrome 开发者工具中不显示的排查方案

确认当前页面是否为 React 应用
React DevTools 仅会在加载了 React 框架的页面中显示面板。打开控制台（按F12切换到Console标签），输入window.React，若返回undefined，说明当前页面不是 React 应用，工具自然不会出现。
检查扩展状态
在地址栏输入chrome://extensions/打开扩展管理页面，找到 React Developer Tools，确保开关处于开启状态。如果需要在本地静态文件页面使用该工具，还要勾选「允许访问文件网址」选项。
检查开发者工具面板列表
打开开发者工具后，点击面板右侧的「>>」按钮，查看下拉列表里是否有「Components」和「Profiler」选项（这两个就是 React DevTools 的核心面板）。如果存在，点击即可调出；如果没有，继续后续排查。
重启 Chrome 和扩展
关闭所有 Chrome 窗口后重新打开；也可以在扩展管理页面点击 React DevTools 的「重新加载」按钮（刷新图标），之后再打开开发者工具尝试。
验证版本兼容性
确保页面使用的 React 版本与 React DevTools 版本兼容。在控制台输入React.version查看页面的 React 版本，再对比扩展商店里 DevTools 的版本说明——老旧 React 版本（如 React 15 及以下）可能无法被新版 DevTools 识别，反之旧版 DevTools 也可能不支持新版 React。
排查扩展冲突
暂时禁用所有其他 Chrome 扩展，只保留 React Developer Tools，再打开 React 应用查看工具是否显示。如果恢复正常，再逐个启用其他扩展，找出引发冲突的那一个。
重置开发者工具布局
打开开发者工具，点击右上角的齿轮图标（设置），找到「Restore defaults and reload」选项，重置布局后重新打开工具查看。