chrome devtools coverage面板仅统计实际加载执行的js/css资源，不统计html文件本身；内联脚本/样式计入覆盖率，但html中的未触发资源（如hidden元素内联代码、懒加载脚本）不会被覆盖，需手动模拟全用户路径操作以提升统计准确性。
Chrome DevTools 的 Coverage 面板不是静态扫描器，它只反映你「手动操作覆盖到的路径」里实际加载并执行/解析的 HTML 相关资源（主要是内联 <script></script> 和 <style></style>），HTML 本身不参与覆盖率统计——但它的引用关系会直接影响 JS/CSS 的加载和执行路径。
Coverage 面板根本不管 HTML 文件本身
Coverage 面板列出的是已加载的 .js 和 .css 文件，不会显示 index.html 或任何 .html 文件。原因很直接：HTML 是标记语言，不“执行”，浏览器只解析它来触发后续资源加载、DOM 构建和脚本执行。所以你看到的覆盖率数据，本质是 HTML 所触发的 JS/CSS 行为结果。
这意味着：
- 如果某个
<script src="utils.js"></script>在 HTML 中但从未被加载（比如被条件注释、JS 动态移除、或放在未渲染的<template></template>里），utils.js就不会出现在 Coverage 列表中 - HTML 中内联的
<script>console.log('hi')</script>会被当作一个匿名脚本计入 Coverage，行号从 1 开始计数 -
<link rel="stylesheet" href="theme.css">加载失败（404/跨域）时，theme.css不会出现，也不会报错——Coverage 只统计成功解析的资源
HTML 结构直接影响 Coverage 结果准确性
SPA 路由、条件渲染、懒加载组件这些都依赖 HTML 的初始结构或 JS 动态插入。Coverage 数据是否可信，取决于你有没有让这些结构真正“活起来”：
- Vue/React 页面只刷了首页？路由跳转后新页面的
app.jschunk 可能全红——必须手动点进每个路由，再刷新或切换回 Coverage 面板重置统计 -
<div id="modal" hidden></div>里的内联脚本永远不会执行，Coverage 会把它标红；得真实触发showModal()才能让对应代码变绿 - 使用
loading="lazy"的图片或defer的脚本，可能在首次加载时不执行——Coverage 记录的是“首次加载+你当前交互”的快照，不是全生命周期 - 服务端渲染（SSR）输出的 HTML 若带预置 JS 数据（如
window.__INITIAL_STATE__），这部分内联脚本会被统计；但若数据为空或被客户端覆盖，对应逻辑可能实际未运行
怎么让 Coverage 更贴近真实 HTML 使用场景
别只点一下“重新加载并开始记录”就导出结果。HTML 驱动的行为太分散，必须按用户路径闭环操作：
- 打开 Coverage 后，先点击左上角圆形录制按钮（红色），再手动执行完整链路：登录 → 进列表页 → 点开详情 → 触发编辑态 → 模拟网络错误 → 回退 → 切换主题（触发
@media/:hover） - 每次路由切换后，不要直接看 Sources 面板——先回 Coverage 面板点“Stop”再“Start”一次，否则新加载的 chunk 不会被纳入当前统计周期
- 过滤掉干扰项：
node_modules、dist/、CDN 域名（如cdn.jsdelivr.net）的资源，避免被第三方库的未用代码带偏判断 - 禁用 Terser 压缩临时构建（开发环境），或确保 source map 准确指向原始行号；否则 Coverage 在 Sources 面板高亮的“红块”可能错位到无关函数里
导出的 CSV 别直接删代码
Coverage 导出的 CSV 只含文件路径、总字节数、未使用字节数、使用率，**没有行号、没有上下文、不区分 dead code 和 guarded code**：
- 一段被
if (false)包裹的代码，在 Coverage 里是红的，但它可能是未来开关、A/B 测试分支，不能删 - polyfill 脚本（如
core-js/stable）在现代浏览器里大概率全红，属于正常现象，删了会导致旧设备白屏 - CSS 里
.btn:hover没触发就是红的，不代表该规则冗余；Coverage 统计的是“是否应用过”，不是“是否存在” - 真正要删的，是那些既没被 HTML 引入、也没被 JS 动态加载、且在 Coverage 全路径遍历中始终未出现的孤立文件（比如遗留的
old-chart.js）
最危险的操作，是看到某 CSS 文件 92% 未使用，就全局删掉——很可能那 8% 正是关键布局修复或暗色模式适配规则，而你没测到对应状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
