Chrome DevTools Coverage面板可实时查看JS执行覆盖率，通过录制页面操作显示代码执行（蓝色）、未执行（红色）及注释（灰色）状态，需启用Source Map定位源码，适用于首屏与交互路径分析。
在浏览器开发者工具中实时查看 JavaScript 代码执行覆盖率，最直接的方式是使用 Chrome DevTools 内置的 Coverage 面板。它无需额外构建或插桩，开箱即用，适合快速评估首屏加载、用户交互路径下哪些代码实际被执行。
打开并启用 Coverage 面板
按 F12 或 Ctrl+Shift+I（Windows/Linux）/Cmd+Option+I（macOS）打开开发者工具，点击右上角 ⋮ → More tools → Coverage，或直接按 Cmd+Shift+P / Ctrl+Shift+P 输入 “Coverage” 并回车启动。
- 面板开启后，点击左上角的录制按钮（●），开始监听页面资源加载与执行
- 执行操作：刷新页面、点击按钮、切换路由等，覆盖你关心的用户路径
- 再次点击录制按钮停止，即可看到所有 JS/CSS 文件的执行占比
识别已执行与未执行代码
在 Coverage 面板中，点击某一行 JS 文件，会自动跳转到 Sources 面板，并以颜色高亮显示代码执行情况：
- 蓝色：该行代码在录制期间被实际执行过
- 红色：该行代码加载进来了，但全程未执行（可能是条件分支未进入、功能模块未触发、兜底逻辑闲置等）
- 灰色：注释或空行，不计入统计
注意：若项目使用了打包工具（如 Webpack/Vite），默认看到的是压缩后的文件。要精准定位原始源码，需确保构建时启用了 devtool: 'source-map'，并在 Sources 面板中启用 Source Map（右键文件 → “Enable source maps”）。
结合业务场景看“冗余代码”而非仅看百分比
覆盖率数值本身不是目标，关键在于理解“为什么没执行”：
- 首屏加载后，某个组件的初始化逻辑（如编辑器插件、打印功能）始终为红色 → 可考虑懒加载或按需引入
- 某个
if (process.env.NODE_ENV === 'development')块全红 → 生产环境确实不需要，但需确认是否误留调试代码 - 大量工具函数（如
utils/deepClone.js）为红色 → 检查是否真未被调用，还是调用路径未覆盖到
这类“运行时未执行”的代码属于 冗余代码，和编译期 dead code 不同，它影响的是实际加载体积与解析性能。
局限性与补充建议
Coverage 面板轻量高效，但也有边界：
- 不支持跨 iframe 或 Service Worker 脚本的统一统计
- 无法记录多次独立访问间的累计覆盖率（每次录制都是全新会话）
- 对动态
eval、Function构造的代码不敏感
如需长期、自动化、集成测试级别的覆盖率（比如 CI 中验证 PR 是否新增了未覆盖逻辑），建议搭配 istanbul 类工具做构建时插桩 + 单测驱动；而 Coverage 面板，就是你每天打开浏览器就能做的第一道质量快筛。
