coverage面板无法在html中启用，它仅存在于chrome devtools运行时环境，必须通过cmd+shift+p（mac）或ctrl+shift+p（win/linux）输入show coverage手动触发，且结果依赖是否完整覆盖所有用户路径、伪类及动态交互。
Coverage面板根本不能在HTML里启用
它不是靠 <script></script>、<meta> 或任何 HTML 标签触发的——Chrome DevTools 的 Coverage 是运行时分析功能，只存在于开发者工具中，且完全不读取 HTML 源码。你在 index.html 里加任何配置都不会让它自动启动。
唯一可靠方式是：打开页面后，按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Win/Linux），输入 Show Coverage 回车。如果没出现，检查是否在 More Tools → Coverage 被手动禁用（某些企业版 Chrome 会隐藏该入口）。
点了“Reload and start recording”但覆盖率不准
常见现象：刚刷新完就看结果，app.js 显示 80% 未覆盖，但你知道它肯定被用了——这基本是因为统计没重置或交互没走全。
- SPA 路由切换不会自动重置 Coverage 统计；必须点面板右上角的循环箭头按钮（
Reload coverage）重新录制，再切到/user、/settings等每个路由 -
:hover、:focus-within、@media (prefers-reduced-motion)这类规则必须真实触发，Coverage 才会标记为“已应用” - 开了 Terser 压缩 + source map 时，Coverage 统计的是压缩后字节，但高亮映射回原始文件，导致绿色/红色块错位、行号跳变；开发环境建议关掉压缩（
optimization.minimize: false）
怎么过滤 node_modules 和 polyfill 避免误删
core-js、regenerator-runtime、vue.runtime.esm-bundler.js 这类基础模块常被标成“95% 未覆盖”，但这不等于它们可删——它们只在旧浏览器或特定 API 调用时才执行。
- 在 Coverage 表格顶部搜索框输入
-node_modules -dist，快速隐藏第三方包 - 对疑似 polyfill 的文件，右键 →
Block URL，刷新页面看是否报错；无异常再结合构建命令（如webpack --display-modules）交叉确认 - 导出的
.json报告不含行号，不能直接当删除清单；红色高亮行需人工点进Sources面板，悬停看提示 “This rule is not used” 才算真正未使用
CSS 规则标红但不敢删？先验证是否真没用
鼠标悬停红色标记行，提示 “This rule is not used” 后，右键选 “Reveal in Styles pane”：
- 如果右侧
Styles面板中完全不显示这条规则 → 它连解析都没进入，大概率可删 - 如果显示但被划掉 → 是被更高优先级样式覆盖，不是“未使用”，删了可能破坏布局
-
@media (max-width: 768px)在桌面窗口下必标红，这是正常行为，不是 bug
真正容易被忽略的是动态生成的 CSS（比如通过 insertRule 或 CSS-in-JS 注入的样式），Coverage 对这类内容无法跟踪，得靠 MutationObserver 或源码审计补漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
