本地开发环境实时查看JavaScript代码覆盖率的核心是“插桩+动态收集+即时反馈”，通过Vite/Webpack等工具注入探针，利用浏览器Coverage面板、全局__coverage__变量或编辑器插件实现刷新即见的闭环验证。
在本地开发环境实时查看 JavaScript 代码覆盖率，核心是“插桩 + 动态收集 + 即时反馈”，无需等测试跑完再生成静态报告。关键在于让浏览器运行的是带覆盖率探针的代码，并把执行数据实时回传到前端界面或控制台。
启动带插桩的本地服务
直接用构建工具（如 Webpack/Vite）或轻量服务器注入覆盖率逻辑：
- Vite 项目可安装 vite-plugin-istanbul，启用后会在 dev server 中自动插桩源码，访问
/__coverage__路径即可看到实时覆盖率面板 - Webpack 用户推荐 babel-plugin-istanbul + webpack-dev-server，配合
devServer.before拦截 JS 请求并返回插桩后代码 - 若用 Blanket.js，需确保测试 HTML 文件中引入了
src/adapters/usage-blanket.js，它会在页面底部渲染实时状态栏，每执行一次测试自动刷新百分比和未覆盖行高亮
浏览器内嵌式实时反馈
不依赖外部报告页面，把覆盖率信息直接叠加在当前开发页上：
- 使用 Chrome DevTools 的 Coverage 面板（More Tools → Coverage），刷新页面即显示 JS/CSS 字节级使用率（蓝色=执行过，红色=未执行），适合快速识别首屏冗余代码
- 配合 istanbul-lib-report 和自定义 reporter，将覆盖率数据注入全局变量（如
window.__coverage__），再用简单脚本读取并渲染成悬浮层或控制台表格 - 某些插件（如 VS Code 的 “Coverage Gutters”）能解析本地生成的
coverage/coverage-final.json，并在编辑器侧边栏标出未覆盖行，保存即更新
控制台快捷调试与验证
快速确认插桩是否生效、哪些语句被遗漏：
立即学习“Java免费学习笔记（深入）”；
- 在开发者工具 Console 中输入
__coverage__（注意双下划线），可查看当前已收集的原始覆盖率对象，检查 key 是否匹配源文件路径 - 对某段函数手动调用后，执行
console.table(Object.values(__coverage__).flatMap(c => c.s))查看各语句执行次数，0 表示完全未触发 - 结合
debugger或断点，在单步执行中观察__coverage__对应字段是否实时递增，验证插桩准确性
整个流程不依赖 CI 或打包产物，改一行代码、刷新一次页面就能看到变化，真正实现“写测试→跑用例→看覆盖”的闭环。
