为什么Chrome DevTools里看不到我写的CSS变量？
我在项目里用了CSS自定义属性（变量），但在DevTools的Styles面板里死活找不到这些变量，调试起来特别麻烦。
我明明在:root里定义了，也确认页面能正常渲染，但DevTools就是不显示。是我写法有问题吗？
:root {
--primary-color: #3498db;
--border-radius: 8px;
}
.button {
background: var(--primary-color);
border-radius: var(--border-radius);
}- 1
回答
57浏览
Chrome DevTools 动画面板怎么不显示我的 CSS 动画？
我在用 Chrome DevTools 调试一个页面，写了简单的 CSS 动画，但打开 Animations 面板后啥也没有，明明元素在动啊？ 我试过刷新页面、重新触发动画，甚至把 animation...
- 2
回答
93浏览
为什么我的CSS动画在Chrome渲染面板显示大量重排但实际很卡？
我在用Chrome DevTools的Rendering面板调试一个CSS动画，发现Layers里显示有很多蓝色的Layout区域，但实际动画在60帧时偶尔还是会卡顿。我用的是transform和op...
- 1
回答
62浏览
Chrome DevTools 动画面板为啥不显示我的 CSS 动画？
我在做一个按钮 hover 的缩放动画，但在 Chrome DevTools 的 Animations 面板里完全看不到任何动画记录，明明页面上有明显动效。我试过刷新、重新触发 hover，也确认打开...
- 2
回答
47浏览
Chrome DevTools 里的 Snippets 保存后怎么找不到了？
我昨天在 Chrome DevTools 的 Sources 面板里新建了个 Snippet，写了段调试用的 console.log('init')，点了保存，今天打开 DevTools 却怎么也找不...
- 1
回答
36浏览
Chrome DevTools 内存快照里的 Detached DOM tree 是什么？
我在用 Chrome DevTools 的 Memory 面板排查内存泄漏，发现快照里有很多 “Detached DOM tree” 条目，点进去还占了不少内存。这到底是什么意思？是不是我哪里没清理事...
- 1
回答
42浏览
Chrome DevTools 内存快照里 Detached DOM 树怎么排查？
我在用 Chrome DevTools 做内存分析时，发现快照里有大量 Detached DOM 节点，但不知道是哪段代码造成的。明明已经移除了 DOM 元素，为什么还占着内存？ 我试过在移除元素前手...
- 1
回答
48浏览
Chrome DevTools 的 Rendering 面板怎么不显示 FPS 和 Paint Flashing？
我最近在优化一个 Vue 组件的动画性能，想用 Chrome DevTools 里的 Rendering 面板看下 FPS 和开启 Paint Flashing，但点了之后完全没反应，FPS 图表是空...
- 1
回答
68浏览
Chrome DevTools里怎么判断是不是内存泄漏？
我在用 Chrome DevTools 的 Memory 面板做内存分析，拍了两个快照，但不太确定怎么看是不是真的有内存泄漏。比如我销毁了一个组件，但快照里还是能看到很多 detached DOM 节...
- 2
回答
61浏览
Chrome DevTools 的 Layers 面板怎么不显示图层信息了？
我之前用 Chrome DevTools 的 Layers 面板查看合成图层，最近打开发现完全空白，连 3D 视图也没有。明明页面里有 transform: translateZ(0) 这种触发硬件加...
- 2
回答
88浏览
Chrome DevTools模拟移动端时媒体查询没生效怎么办？
用Chrome DevTools模拟iPhone 12调试页面时，媒体查询突然不生效了，明明在桌面模式下正常 比如这段代码：@media (max-width: 768px)在桌面端能正确触发，但切换...
在Styles面板里，找到右上角那个过滤器的下拉箭头，点开之后有个"Show CSS variables"的选项，勾选上就能看到了。
或者直接按F1打开Settings，在Preferences -> Elements下面也能找到"Show CSS variables in the Styles panel"这个开关。
新版Chrome可能位置稍有不同，但肯定在这附近，找不到的话Ctrl+F搜一下"variable"关键词。
你的代码完全没问题，
var(--primary-color)这种用法是对的，页面能正常渲染说明变量已经生效了，就是DevTools没给你显示出来。开了那个开关就能在Styles面板里看到:root定义的变量了，调试的时候就方便多了。