Kapture

本地 Bug 捕获 · 录屏 / 控制台 / 网络 / 操作步骤 一键打包

Kapture — 一键打包 Bug 现场，给开发的不再是「一句话 + 一张截图」 它解决什么问题 提 Bug 难，复现 Bug 更难。 QA 在测试环境点出一个异常，把现象口头描述给开发，开发问： - 「你点了什么？」 - 「控制台报错截一下？」 - 「网络请求贴一下？」 - 「Cookie / localStorage 里啥状态？」 - 「能录个屏吗？」 来回半小时，最后还经常因为现场已经丢了而无法复现。 Kapture 让这一切变成一次点击。 你点「开始录制」、复现一遍、点「停止」，扩展会同步采集： - 整个标签页的录屏视频（VP9 / WebM） - 每一次鼠标点击 / 键盘输入 / 页面跳转聚合成的操作步骤时间线 - 浏览器控制台全部 log / warn / error（含调用栈） - 全部 HTTP / fetch / XHR 请求（URL、方法、状态码、耗时、请求 / 响应头与正文片段） - 当前页面的 Cookie / localStorage / sessionStorage / IndexedDB 快照 - 浏览器 / 操作系统 / 视口 / 时区 / UA 等环境元数据 然后一键导出为一个自包含的 zip 包：里面有一份 report.html，开发在自己电脑上双击就能离线打开——不用装扩展、不用搭环境、不用连接你的机器。视频在网页里直接播，操作步骤、控制台、网络、存储、系统信息分 5 个 Tab 浏览，时间轴对齐，点哪一帧就能看到那一刻发生了什么。 ▎ 一句话：把过去要靠口述、截图、QQ 传文件、远程协助才能凑齐的「Bug 现场」，压缩成一个能塞进任何工单系统附件的 zip。 为什么应该装它 1. 真正的「现场」，不是事后回忆 录屏 + 操作步骤 + 控制台 + 网络 + 存储是同一时间轴采集的。开发拿到包，能在 report.html 里把视频拉到出错的那一秒，立刻看到对应时刻控制台抛了什么、哪一个接口返回了什么、那时候 localStorage 里 token 是什么——这些信息分散在不同工具里时极难拼回来，集中在一份报告里之后，复现成本下降一个数量级。 2. 录屏不会触发 Chrome 那条吓人的「该浏览器正被自动化软件控制」黄条 很多同类录制方案依赖 chrome.debugger 或 CDP，会在页面顶部弹出一条横幅，既影响录屏画面也吓到普通用户。Kapture 的网络抓取走 chrome.webRequest + 主世界的 fetch / XMLHttpRequest 注入垫片，完全不挂调试器，录出来的视频干净，用户体验和不开扩展时一致。 3. 一键分享链接，对方不用装任何东西 内的录制都能走分享链接（视频经过 1280px / 1.5Mbps 的智能压制，1 分钟内的会话基本都能塞下）。 4. 真正的视频裁剪，不是 #t=start,end 那种假裁剪 时间轴拖动选区后导出，Kapture 会真的解析 WebM 容器、按关键帧重写 Cluster 时间戳，生成一个新的、独立的视频文件。导出的录屏只包含你框选的那一段，文件更小、播放器兼容性更好，发给开发不会出现「拖到中间才开始播」的尴尬。 5. 长会话不怕，断电不慌 - 环形缓冲（Oneshot）模式：常开录制，只保留最近 N 分钟，遇到 Bug 立刻按「截取」回溯——再也不会因为「忘了开录屏」而丢现场。 - 自动分段轮转：长时间录制时按容量阈值自动切片，避免单条记录过大撑爆 IndexedDB。 - 本地媒体库：所有录制都存在浏览器本地的 IndexedDB 里，可以随时回到 Library 页打开旧的录制重新导出 / 分享 / 删除。 - 自动清理：可配置「保留最近多少天 / 多少条」，每天定时清理过期记录，不用手动维护磁盘。 6. 数据完全在你本地 Kapture 是一个纯本地工具： - 录屏、控制台、网络、存储数据只写到你浏览器的 IndexedDB； - 导出 zip 通过 File System Access API 写到你自己选定的文件夹（不可用时降级为 Chrome 下载到 Downloads/Kapture/）； - 只有当你**主动点「生成分享链接」或「提交到 Kaptain」**时，才会发生网络上传，且目标是公司域名 pub.qunhequnhe.com / qhstaticssl.kujiale.com； - 不接入任何第三方分析、广告、追踪 SDK。 7. 权限是审计过的最小集 manifest 只申请录屏 / 网络监听 / 存储 / 标签页 / 下载 / Cookie 这一组完成功能必需的权限，没有「读取你所有网站上的所有数据」之外的隐藏权限。cookies 用于让报告的「存储」Tab 能展示 HttpOnly Cookie——这正是排查登录态 / 鉴权类 Bug 时最需要的信息。 谁在用它 - 测试工程师：交付给开发的工单从此带「现场快照」，复现率显著提升，扯皮显著减少。 - 前端开发：自测发现的偶现 Bug，先打开 Oneshot 常驻录制；问题一出现立即截取上下文，免去「再现一次」的折磨。 - 产品 / 设计：体验走查时录下交互全过程，反馈不再是「这里感觉怪怪的」，而是「第 0:23 秒点这个按钮后的 loading 状态有问题」。 - 客户支持：让用户复现问题时录一份发回来，比口述清楚十倍。 关键功能一览 - 录制：当前标签页录屏（VP9 / WebM，长边自适应至 1280px） - 录制模式：Oneshot 环形回溯 / 标准录制 / 自动分段 - 采集：操作步骤聚合、控制台日志、HTTP 请求、页面存储快照、环境元信息 - 编辑：5 Tab 浏览（操作步骤 / 控制台 / 网络 / 存储 / 系统信息）+ 视频时间轴标记 + 真实关键帧裁剪 - 导出：自包含 zip（含可离线打开的 report.html）/ 散文件目录 / HAR / Markdown 步骤 - 分享：生成 CDN 短链（≤20MB）/ 提交到 Kaptain 工单系统（公司内网） - 管理：本地媒体库、按规则自动清理 隐私与安全 - 所有采集默认只在你本地浏览器中处理； - 网络请求体按配置截断（默认 ~256KB 单条上限），避免大响应撑爆存储； - 分享链接 / Kaptain 提交需要先通过公司 SSO 登录，未登录时按钮会被软禁用，提示先登录； - 卸载扩展即清空全部本地数据。 平台要求 - Chrome ≥ 122（Manifest V3） - macOS / Windows 均已通过手工 QA 清单验收 --- 如果你的工作流里曾经因为「Bug 现场不全」反复返工，Kapture 大概率能把这件事的成本降到原来的十分之一。装上它，下一次提 Bug 时，直接把那个 zip 或链接甩过去就行。