React DevTools 为什么在 Chrome 里安装了却没显示组件面板？
我在 Chrome 装了 React Developer Tools 扩展，也打开了开发者工具，但就是找不到 React 组件那个标签页，试过刷新页面和重启浏览器都不行。
我的项目是用 create-react-app 搭的，本地开发环境跑在 http://localhost:3000，按理说应该能识别到 React 才对，是不是哪里配置漏了？
- 2
回答
55浏览
Elements面板里为什么看不到我React组件的DOM结构？
我在开发一个React应用，发现Chrome DevTools的Elements面板里只显示，里面的内容全是空的，根本看不到我写的组件生成的DOM。明明页面上是正常渲染出来的，但Elements里就是...
- 1
回答
62浏览
Chrome DevTools 的 Rendering 面板怎么不显示 FPS 和 Paint Flashing？
我最近在优化一个 Vue 组件的动画性能，想用 Chrome DevTools 里的 Rendering 面板看下 FPS 和开启 Paint Flashing，但点了之后完全没反应，FPS 图表是空...
- 2
回答
71浏览
React组件在移动端频繁重新渲染，如何用开发者工具定位性能瓶颈？
我在用React开发移动端页面时，发现一个列表组件在滑动时帧率明显下降。用Chrome DevTools的Performance面板录了下，发现组件每帧都在重新渲染，但数据其实没变。尝试过加React...
- 1
回答
81浏览
Chrome DevTools 动画面板为啥不显示我的 CSS 动画？
我在做一个按钮 hover 的缩放动画，但在 Chrome DevTools 的 Animations 面板里完全看不到任何动画记录，明明页面上有明显动效。我试过刷新、重新触发 hover，也确认打开...
- 1
回答
49浏览
为什么我的Vue组件在Chrome Layers面板里显示很多不必要的图层？
最近用Chrome DevTools的Layers面板分析页面性能，发现一个简单的Vue组件居然创建了5、6个合成层，明明没加transform或will-change啊。这会不会影响渲染性能？ 我试...
- 2
回答
74浏览
Chrome DevTools 的 Layers 面板怎么不显示图层信息了？
我之前用 Chrome DevTools 的 Layers 面板查看合成图层，最近打开发现完全空白，连 3D 视图也没有。明明页面里有 transform: translateZ(0) 这种触发硬件加...
- 1
回答
67浏览
Chrome DevTools 动画面板怎么不显示我的 CSS 动画？
我在用 Chrome DevTools 调试一个页面，写了简单的 CSS 动画，但打开 Animations 面板后啥也没有，明明元素在动啊？ 我试过刷新页面、重新触发动画，甚至把 animation...
- 2
回答
59浏览
Chrome DevTools 里的 Snippets 保存后怎么找不到了？
我昨天在 Chrome DevTools 的 Sources 面板里新建了个 Snippet，写了段调试用的 console.log('init')，点了保存，今天打开 DevTools 却怎么也找不...
- 1
回答
49浏览
Chrome DevTools 内存快照里的 Detached DOM tree 是什么？
我在用 Chrome DevTools 的 Memory 面板排查内存泄漏，发现快照里有很多 “Detached DOM tree” 条目，点进去还占了不少内存。这到底是什么意思？是不是我哪里没清理事...
- 1
回答
56浏览
Chrome DevTools 内存快照里 Detached DOM 树怎么排查？
我在用 Chrome DevTools 做内存分析时，发现快照里有大量 Detached DOM 节点，但不知道是哪段代码造成的。明明已经移除了 DOM 元素，为什么还占着内存？ 我试过在移除元素前手...
先说最可能的原因：你访问的页面是生产环境构建的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'。
你先去试试这些方法，看看具体是哪种情况导致的。