A2--张涛--Canyon 提升JavaScript代码质量的全面覆盖率分析工具.pdf

1、Canyon:Canyon:提升提升JavaScriptJavaScript代码质量的全面覆代码质量的全面覆盖率分析工具盖率分析工具张涛携程机票资深前端开发工程师张涛张涛携程旅行 资深前端开发工程师Canyon开源项目作者目录目录C O N T E N T S1.1.议题背景议题背景2.2.架构图架构图3.3.界面展示界面展示4.4.代码插桩代码插桩5.5.测试与上报测试与上报6.6.报告生成报告生成议题背景议题背景1 1Canyon:Canyon:提升提升JavaScriptJavaScript代码质量的全面覆盖率分析工具代码质量的全面覆盖率分析工具议题背景工具工具插桩方式插桩方式优点优点缺

2、点缺点nyc直接给js插桩，例如 nyc instrument main.js不限工程类型对于现代前端工程效果差babel-plugin-istanbul在babel编译时插桩插桩效果好仅限babel工程-社区缺乏端到端测试的js覆盖率收集工具-公司开发了前端流量录制平台，并部署大规模模拟器集群进行UI自动化回放-需要收集和展示端到端测试的覆盖率，以便开发者了解代码质量架构图架构图2 2Canyon:Canyon:提升提升JavaScriptJavaScript代码质量的全面覆盖率分析工具代码质量的全面覆盖率分析工具架构图界面界面展示展示3 3界面展示界面展示创建创建项目项目界面展示界面展示项

3、目列表页项目列表页界面展示界面展示覆盖率覆盖率概览概览界面展示界面展示覆盖率覆盖率报告报告界面展示界面展示覆盖率覆盖率报告报告代码插桩代码插桩4 4JavaScriptJavaScript覆盖率覆盖率介绍介绍什么是覆盖率什么是覆盖率覆盖率是度量测试完整性的一个手段，是测试有效性的一个度量。通过已执行代码表示，用于可靠性、稳定性以及性能的评测。它有四个测量维度它有四个测量维度行覆盖率（line coverage）：是否每一行都执行了？函数覆盖率（function coverage）：是否每个函数都调用了？分支覆盖率（branch coverage）：是否每个分支都执行了？语句覆盖率（statem

4、ent coverage）：是否每个语句都执行了？代码插桩代码插桩经过babel等语法解析工具转换成ast语法树后，在对应类型节点上加上了计数器。istanbuljsistanbuljsThe golden standard for JavaScript code instrumentation is the battle-hardened istanbuljs代码插桩代码插桩代码覆盖率最重要的一环就是代码插桩。经过大量的实验验证，现代化前端工程的覆盖率插桩必须要编译时插桩。工程类型工程类型方案方案vanilla javascriptnycbabelbabel-plugin-istanbulv

5、itevite-plugin-istanbul(experimental)swcswc-plugin-coverage-instrument(experimental)插桩本质插桩本质js代码经过esprima（语法分析器）解析后生成的语法树时，插桩工具在对应类型节点上加上了计数器，当代码运行到的时候计数器+1插桩前后插桩前后对比对比需要特别注意的是，代码探针的插桩会在构建产物上下文加上代码探针，会使代码整体产物增大30%，不要上生产环境。插桩前插桩后适用的工程适用的工程类型类型工程工程类型类型方案方案vanilla javascriptnycbabelbabel-plugin-istanbu

6、lvitevite-plugin-istanbul(experimental)swcswc-plugin-coverage-instrument(experimental)实际上投入生产使用的工程90%以上都是babel工程babelbabel工程工程示例示例以babel.config.js为例与与CI/CDCI/CD集成集成为了紧密关联插桩代码的源代码，我们适配了各种provider，将环境变量发送到Canyon服务端，兑换到reportID，方便覆盖率数据聚合计算完成后的覆盖率源文件的关联展示。我们还提供了babel-plugin-canyon的ba