Hi-CC 魔法球

Hi-CC魔法球是上海惠艾信息科技有限公司的前端测试覆盖率度量展示工具，通过浏览器插件方式，帮助测试人员/开发人员在测试过程中，能实时获知被测页面的代码覆盖率情况，同时反馈未被测试的代码的行号以便及时补测，是研发测试的防漏测神器。

Website Analytics
功能介绍

了解魔法球

社区版与企业版对比

模块

功能

社区版

企业版
实时覆盖率魔法球 PC浏览器
混合移动App
浮框、拖拽、贴边实时覆盖率展示
覆盖率详情 前端实时覆盖率
后端实时覆盖率
增量模式（只统计变更代码）
全量模式
未覆盖代码行列表
详细代码染色报告（在代码上呈现已覆盖、未覆盖等信息）
个人覆盖率统计
每日覆盖率记录
精准回归用例推荐
我的需求覆盖率
我的用例分析统计
Hi-CC平台数据同步 与Hi-CC平台的项目、需求、应用、个人、等其它数据的实时同步
魔法球配置 菜单选项，显示调整等
打算试试吗?

浏览器扩展安装完成后，可访问在线Vue示例应用

Edge扩展商店下载   本地下载   Chrome扩展商店下载  
cta dashboard
快速入门

实现原理

  • 支持现代前端的三大主流框架 Vue/Anguarl/React。

  • 前端代码在部署前需要使用istanbul工具对代码"插桩"。

  • “插桩”后的代码在浏览器运行时会输出覆盖率数据，在浏览器中打开控制台F12，键入 window.__coverage__可看到覆盖率数据（右图）。

  • Hi-CC魔法球基于此数据计算并呈现。

  • 不同的开发框架及构建工具链有不一样的istanbul插件。

  • 具体如何插桩请参考下方插桩示例。

快速入门

插桩 示例

支持现代前端的三大主流框架 Vue/Anguarl/React

社区版魔法球 Gitee仓库

含下载，以及安装说明。社区版提供企业和个人免费自由使用，具体参见协议。

Vue2.6 示例

演示基于Vue2.6 框架的istanbul覆盖率插桩。构建工具链为vue-cli、webpack和babel。babel有Istanbul工具的插件babel-plugin-istanbul。

Vue2.5 示例

演示基于Vue2.5 框架的istanbul覆盖率插桩。构建工具链为vue-cli、webpack和babel。babel有Istanbul工具的插件babel-plugin-istanbul。

Vue3 示例

演示基于Vue3框架的istanbul覆盖率插桩。构建工具链为Vite，Vite有Istanbul工具的插件vite-plugin-istanbul。

Angular6+ 示例

演示基于Angular6+ 框架的istanbul覆盖率插桩。使用@angular/cli构建，内部基于webpack5+工具链，需要通过扩展webpack构建配置的方式来插桩。

React17 示例

演示基于React17 框架的istanbul覆盖率插桩。基于webpack5+工具链，需要通过扩展webpack构建配置的方式来 插桩。

下载专区

产品与文档下载

社区版

本地下载
Edge扩展商店
Chrome扩展商店

文档下载

产品指南
说明文档
交流贡献

欢迎关注和参与

社区论坛

知乎论坛

问题和建议

请在Hi-CC魔法球 社区版发布仓库留言

微信公众号

联系我们

www.hi-agile.com
service@hi-agile.com
17805801516 Lily Fan