React DevTools 为什么在 Chrome 里安装了却没显示组件面板？
我在 Chrome 装了 React Developer Tools 扩展，也打开了开发者工具，但就是找不到 React 组件那个标签页，试过刷新页面和重启浏览器都不行。
我的项目是用 create-react-app 搭的，本地开发环境跑在 http://localhost:3000，按理说应该能识别到 React 才对，是不是哪里配置漏了？
- 1
回答
29浏览
Elements面板里为什么看不到我React组件的DOM结构？
我在开发一个React应用，发现Chrome DevTools的Elements面板里只显示，里面的内容全是空的，根本看不到我写的组件生成的DOM。明明页面上是正常渲染出来的，但Elements里就是...
- 2
回答
46浏览
React组件在移动端频繁重新渲染，如何用开发者工具定位性能瓶颈？
我在用React开发移动端页面时，发现一个列表组件在滑动时帧率明显下降。用Chrome DevTools的Performance面板录了下，发现组件每帧都在重新渲染，但数据其实没变。尝试过加React...
- 1
回答
3浏览
Chrome DevTools 的 Layers 面板怎么不显示图层信息了？
我之前用 Chrome DevTools 的 Layers 面板查看合成图层，最近打开发现完全空白，连 3D 视图也没有。明明页面里有 transform: translateZ(0) 这种触发硬件加...
- 1
回答
14浏览
Chrome DevTools 动画面板怎么不显示我的 CSS 动画？
我在用 Chrome DevTools 调试一个页面，写了简单的 CSS 动画，但打开 Animations 面板后啥也没有，明明元素在动啊？ 我试过刷新页面、重新触发动画，甚至把 animation...
- 2
回答
146浏览
为什么Redux DevTools显示空状态但没报错？
在React项目里配置了Redux store后，Redux DevTools扩展明明已经打开，状态却一直显示为空对象。代码应该没问题啊，我检查过Provider包裹了根组件，store也正确传进去了...
- 2
回答
60浏览
为什么React中使用useState后，Chrome的Blink引擎没有立即更新DOM？
我写了一个简单的计数器组件，点击按钮时用useState更新count，但发现Chrome里DOM的显示总比state慢半拍。比如第一次点击后，控制台打印count是1，但页面还是显示0，再点第二次才...
- 2
回答
67浏览
Chrome DevTools模拟移动端时媒体查询没生效怎么办？
用Chrome DevTools模拟iPhone 12调试页面时，媒体查询突然不生效了，明明在桌面模式下正常 比如这段代码：@media (max-width: 768px)在桌面端能正确触发，但切换...
- 2
回答
66浏览
为什么我的CSS动画在Chrome渲染面板显示大量重排但实际很卡？
我在用Chrome DevTools的Rendering面板调试一个CSS动画，发现Layers里显示有很多蓝色的Layout区域，但实际动画在60帧时偶尔还是会卡顿。我用的是transform和op...
- 2
回答
14浏览
Chrome DevTools 工作区映射后为什么改代码不生效？
我用 Vue 写了个组件，本地开发时想通过 DevTools 的 Workspace 直接修改源码并保存，但改完刷新就没了，根本没写回文件。明明已经把项目文件夹加到 Workspace 了，也显示了绿...
- 1
回答
19浏览
WebGL组件在React中如何正确销毁避免内存泄漏？
我在React里封装了一个WebGL画布组件，每次切换页面时发现GPU内存没释放，Chrome任务管理器里显存一直涨。 试过在useEffect返回函数里调用gl.getExtension('WEBG...
先说最可能的原因：你访问的页面是生产环境构建的React代码。
React在生产模式下会禁用开发者工具，这是为了安全和性能。create-react-app 做
npm run build之后生成的代码就是生产模式。你现在跑的是localhost:3000，正常应该是开发模式，但有时候会有些情况导致它实际上走了生产版本。先确认一下：你在终端里运行的是
npm start还是直接用 build 后的文件？如果是前者，刷新页面后打开Chrome开发者工具，看看有没有报错或者警告信息。如果确认是开发模式但还是不行，试下这个方法：
打开Chrome开发者工具，点右上角三个点 → 更多工具 → 扩展程序，找到 React Developer Tools，点开详情，确保"允许访问文件网址"这个选项是打开的。
还有一种情况比较坑：某些React版本和当前版本的React DevTools不兼容。具体来说，React 16.14.0 左右版本在搭配 DevTools v4.x 时会出问题。你可以在浏览器控制台输入
__REACT_DEVTOOLS_GLOBAL_HOOK__看看有没有反应，如果有打印出对象信息，说明页面确实被DevTools监听到了，只是面板没显示出来。这种情况下，试试卸载当前扩展，去Chrome商店下那个beta版本来：
chrome.google.com/webstore/detail/react-developer-tools/bmlchbkjhcdhhblllmimlfhnmioehihj
安装完beta版再试试。
最后还有个可能性：你的项目可能用了自定义的 webpack 配置，不小心把 React 设置成了 production 模式。检查一下 webpack 配置里的 mode 选项，确保是 'development' 而不是 'production'。
你先去试试这些方法，看看具体是哪种情况导致的。