Coverage面板不直接标识死代码，仅反映录制路径中未执行的JS字节或未应用的CSS规则；需完整覆盖所有路由、交互状态及条件分支，再通过Sources和Styles面板交叉验证红色行是否真未使用。
Coverage 面板本身不直接告诉你“哪段代码是死代码”，它只反映「在你录制的用户路径中，哪些字节没被 V8 解析执行或没被样式引擎应用」。要识别出高达 80% 未覆盖的 JS/CSS 并判断是否真可删，关键不在看数字，而在验证路径完整性与上下文真实性。
完整走遍所有运行时路径，避免统计失真
Coverage 统计的是你亲手触发的路径，不是全量逻辑快照。单次刷新后看到 vendor.js 80% 红色，大概率只是没走到对应模块：
- SPA 必须逐个访问所有路由：/、/login、/dashboard、/settings……每切一次，都点 Coverage 面板左上角的↻ “Reload and start recording”重新录制，不能靠浏览器后退/前进切换
- 手动触发所有条件分支：点击展开菜单、悬停触发
:hover、聚焦输入框激活:focus、滚动到底部加载懒组件、切换深色模式（影响@media (prefers-color-scheme: dark)）、模拟网络失败重试逻辑 - 动态注入内容也要覆盖：比如模态框是点击后才
document.body.appendChild(modalEl)，就得真点开再关闭；否则其中的 JS 和内联样式永远标红
区分“真未用”和“条件未满足”
红色 ≠ 可删。很多标红代码只是当前窗口尺寸、设备类型或用户状态没匹配到：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
-
@media (min-width: 1440px) { .hero { ... } }在 1200px 宽度下必然标红——这不是冗余，是响应式设计正常行为 -
if (isIE11) { polyfillX() }在 Chrome 里当然不执行，但删了会导致旧浏览器白屏 - 通过
el.classList.toggle('active')或style.cssText = '...'动态加的样式，Coverage 完全不可见，需人工检查调用链 - CSS-in-JS（如 Styled Components）生成的运行时 class 名，不会出现在原始 CSS 文件里，Coverage 对其无感知
交叉验证，锁定真正可删的冗余
单看 Coverage 表格里的百分比风险极高，必须结合其他面板反向确认：
立即学习“前端免费学习笔记（深入）”；
- 在 Sources 面板打开标红的文件，悬停红色行看提示：“This rule is not used” → 右键选 Reveal in Styles pane：如果右侧 Styles 面板里完全不出现该规则，才可疑；如果出现但被划掉，说明被更高优先级样式覆盖，不是未用
- 在 Elements 面板右键目标元素 → Break on > attribute modifications，然后操作疑似功能（如开关按钮），看是否动态增删 class 或 style 属性
- 全局搜索项目代码：
classList.add(、className +=、setAttribute('class'、createStyleSheet等调用，把拼接出的类名正则加入 PurgeCSS 的safelist（例如/^is-.+$/） - 对 node_modules 中标红的 polyfill（如 core-js、regenerator-runtime），右键 Coverage 表格中对应文件 → Block URL，刷新页面看是否报错；无异常再查 webpack 构建产物中是否真有引用
过滤干扰，聚焦业务层真实冗余
第三方库和运行时基础代码天然高未覆盖，别被数字误导：
- 在 Coverage 表格顶部搜索框输入 -node_modules -dist -vendor，快速隐藏框架、打包工具和依赖包，专注查看自己写的
src/下的文件 - 开发环境关掉 Terser 压缩（
optimization.minimize: false），避免 Coverage 统计压缩后字节但高亮映射到原始行号，造成绿色/红色块错位 - 导出的 coverage.json 不含行号信息，不能当删除清单；红色高亮必须人工点进 Sources 面板，逐行确认上下文、调用关系和条件依赖
