CSS Overview 面板是Chrome DevTools的实验性功能，需先通过Cmd+Shift+P输入Show Experiments启用，再用Show CSS Overview打开；点击Capture overview分析当前页面CSS，支持查看颜色、字体、未使用声明等并溯源至元素或源码行。
CSS Overview 面板不是 HTML 功能，它不通过 HTML 代码启用或调用，而是 Chrome DevTools 的独立实验性面板——你得先打开 DevTools，再手动开启它，最后对当前已加载的页面（无论 HTML 多复杂）做一次快照分析。
如何在 Chrome 中启用并打开 CSS Overview 面板
这个面板默认关闭，且不在常规 DevTools 标签栏中显示，必须主动启用实验功能：
- 打开任意网页，按
Cmd+Option+I（Mac）或Ctrl+Shift+I（Windows/Linux）唤出 DevTools - 按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Windows/Linux）打开命令菜单，输入Show Experiments并回车 - 在实验设置页中勾选
CSS Overview，关闭设置页 - 再次按
Cmd+Shift+P，输入Show CSS Overview回车，或点击 DevTools 顶部标签栏右端的「更多」图标（⋯），从下拉菜单中选择CSS Overview
⚠️ 常见失败点：没重启 DevTools —— 启用实验后，需关闭再重开 DevTools 才能确保新标签生效；部分 Chrome 版本（如低于 87）根本不支持该功能，建议使用 Chrome 120+。
Capture overview 按钮点了没反应？检查这三件事
点击面板左上角的 Capture overview 后无报告、卡住或报错，通常不是代码问题，而是环境或权限限制：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 当前页面是
file://协议本地打开的 HTML 文件？Chrome 会因安全策略禁用 CSS Overview 分析，需用本地服务器（如python3 -m http.server）访问http://localhost:8000/xxx.html - 页面含大量内联
<style>或动态插入的 CSS（比如通过 JS 注入的document.styleSheets）？CSS Overview 只分析已解析并应用到 DOM 的样式，未挂载或被 JS 移除的规则不会计入Unused declarations - DevTools 正在调试 iframe 子页面，但焦点在父页面？必须确保当前激活的标签页就是你要分析的目标页面，否则
Capture overview会分析错误上下文
颜色、字体、未使用声明这些数据到底怎么溯源
面板里每个可点击项都提供跳转能力，但行为有差异，别指望全都能直接定位到源码行：
- 颜色块（如
#3b82f6）点击后，右侧会列出所有使用该色值的元素；点击某个元素，DOM 树自动高亮，Styles面板同步展开对应规则 —— 但不会跳转到原始 CSS 文件，除非你启用了 sourcemap 且该样式来自预处理器（如 Sass） - 字体信息里的
font-family: Inter, sans-serif点击后，只高亮使用该字体堆栈的元素，不显示定义位置；想查定义处，得配合Elements > Styles面板逐个看 computed 值来源 -
Unused declarations列表中的每条规则，点击后确实会跳转到Sources面板的对应 CSS 文件和行号 —— 但前提是该样式表是外链或内嵌<style>，且未被 JS 动态移除或覆盖
注意：Media queries 部分点击后跳转的是媒体查询本身所在的 CSS 行，而非匹配生效的元素，这点容易误解。
为什么“未使用声明”数量和 Lighthouse 报的不一致
两者检测逻辑完全不同，不能交叉验证：
- CSS Overview 的
Unused declarations是静态分析：扫描所有已加载的样式表，对比当前 DOM 结构中实际渲染的元素，标记那些 selector 完全没匹配到任何节点的规则（包括 class、id、属性选择器等） - Lighthouse 的 “Eliminate render-blocking resources” 或 “Remove unused CSS” 是基于页面加载过程的动态覆盖率数据，依赖 Puppeteer 注入的覆盖率 API（
CSS.getCoverage），统计的是运行时真正参与绘制的字节占比 - 所以：CSS Overview 可能漏掉 JS 动态添加 class 后才生效的规则；Lighthouse 可能误判异步加载组件所需的 CSS 为“未使用”
真正要删 CSS，得两个面板交叉比对 + 人工验证：先用 CSS Overview 锁定明显废弃的整条规则（比如 .legacy-header 在 DOM 里根本不存在），再用 Lighthouse 看删除后首屏性能是否提升，而不是只信一个数字。
