1. JS覆盖率统计平台 Build a JS Coverage Statistical Platform Based on Istanbul 酷家乐 银时

2. 使⽤用场景001 和 三个JS覆盖率统计⼯工具

3. 使⽤用场景001 和 三个JS覆盖率统计⼯工具 ScriptCover Istanbul JsCoverage karma-coverage 浏览器器插件，使⽤用⽅方便便，但Chrome商店已下架； ⽆无需预插桩即可监控browser运⾏行行js代码，拿混淆后的代码毫⽆无办法； 开源，但已停⽌止维护； 覆盖率统计插件，可配多种各种UT框架和⾃自动化框架使⽤用； 编译时预插桩，代码在UT或browser运⾏行行时都可统计覆盖率； 开源，旧版已停⽌止维护，新版(请搜nyc)维护的很好； Js写的，可扩展； 单测覆盖率统计插件，可配多种各种UT框架和⾃自动化框架使⽤用； 编译时预插桩，代码在UT或browser运⾏行行时都可统计覆盖率； 开源，旧版已停⽌止维护，新版(请搜JsCover)维护的很好； Java写的，可扩展；和 Istanbul ⾮非常的像； Karma 的插件，基于 Istanbul 写的； 如果⽤用 Karma 做⾃自动化，使⽤用很⽅方便便； 较定制化，可模仿但不不好直接扩展；

4. 使⽤用场景001 和 三个JS覆盖率统计⼯工具 单版本，单次测试 ⼀一般⽤用于单元测试、前端⾃自动化 报告⽣生成在本地 不不⽀支持多次测试覆盖率叠加

5. 使⽤用场景002 和 基于上述⼯工具的⼀一些实践 打包⼀一个前端版本 并部署在某个环境 多个测试 并⾏行行测试 或运⾏行行⾃自动化 实时统计， 实时出报告

6. 使⽤用场景002 和 基于上述⼯工具的⼀一些实践 Istanbul- Middleware JsCover++ 基于 Istanbul 写的中间件； 需要前端代码预插桩并调⽤用 middleware 提供的数据上传接⼝口； 可统计⼀一个前端⼯工程在多个终端、多种⽅方式测试的总覆盖率； 官⽅方，开源，可扩展性强。 基于 JsCover 写的服务； 和 Istanbul-Middleware 很相似，但更更定制化； 没开源。

7. 实时统计， 实时出报告 使⽤用场景002 和 基于上述⼯工具的⼀一些实践 打包⼀一个前端版本 并部署在某个环境 单项⽬目，单版本 数据⽆无统⼀一管理理，只能导成⽂文件 Repo⽆无法⾃自动匹配更更新 多个测试并⾏行行测试 或运⾏行行⾃自动化

8. 使⽤用场景003 和 基于Istanbul的改造 打包多⼯工程的前端版本 部署多个环境 实时统计， 实时出报告 保存数据 ⽤用于统计 测试各⾃自测负责的版本 功能测试+⾃自动化

9. 使⽤用场景003 和 基于Istanbul的改造 如何使⽤用istanbul-midleware 部署middleware 找个环境部署 Istanbul-middleware 使 默认接⼝口可⽤用 插桩 使⽤用Istanbul的插件给前端代码插桩 Link 浏览器器运⾏行行插桩后代码 查看 window.__coverage__ Link 调⽤用middleware的接⼝口 前端代码调⽤用 middleware/coverage/client 接⼝口 Link 查看报告 浏览器器打开⽹网⻚页 middleware/coverage Link

10. 使⽤用场景003 和 基于Istanbul的改造 Repo 如果说，我们要满⾜足这样的测试场景？ 我们有好多个 我这样设计架构 Link 我这样设计接⼝口 Link 我这样设计数据库 Link 最后的效果 Link 每个Repo部署多个 每个环境有多个版本 环境 版本 分别统计 分别统计 分别统计

11. 使⽤用场景003 和 基于Istanbul的改造 我还有哪些没做的？ 01 02 03 代码Diff，⽀支持增量量覆盖率统 计 基于代码Diff，⽀支持多个版本 的覆盖率数据 Merge 可视化统计各⼯工程、各版本覆 盖率数据

12. 酷家乐技术质量量 知乎主⻚页 酷家乐 官⽅方技术博客

13. 以下是 截图素材

14. 截图—如何插桩 以酷家乐的某个前端repo为例例： 它使⽤用babel编译打包，可使⽤用babel-plugin-Istanbul插桩 请参考：github.com/istanbuljs/babel-plugin-istanbul 对于其他类型的JS前端⼯工程， 请参考：github.com/istanbuljs/nyc

15. 截图—插桩前后代码对⽐比 返回

16. 截图—前端覆盖率数据⻓长什什么样 返回

17. 截图—覆盖率是如何收集的 返回

18. 截图—覆盖率报告⻓长什什么样-⽂文件列列表

19. 截图—覆盖率报告⻓长什什么样-代码 返回

20. 截图—设计架构 返回

21. 截图—设计数据库 返回

22. 截图—设计接⼝口 Middleware 初始接⼝口 （https://github.com/gotwarlost/istanbul-middleware URL Description GET  /show Dynamic code coverage HTML report showing live coverage. Clickable with drill- downs just like the static version （查看覆盖率报告 POST /client Allows you to post a coverage object for client-side code coverage from the browser. Must be a JSON object with a Content-type: application/json header. This object is aggregated with the stats already present on the server （client 上传覆盖 率数据 GET  /download Download a zip file with coverage JSON, HTML and lcov reports （下载覆盖率报告 POST /reset Reset coverage to baseline numbers （重置覆盖率数据

23. 截图—设计接⼝口 返回

24. 截图—上传覆盖率数据 调接⼝口区分⼯工程和版本

25. 截图—查看覆盖率报告 筛选⽬目录、版本，或查看源数据 返回