截图 Chrome 扩展:如何捕获像素之外的证据

截图 Chrome 扩展解决的是 bug 报告里容易的那一半:页面当时长这样。难的那一半是图片展示不了的一切——空白组件背后的控制台报错、返回为空的那个请求、问题发生时的浏览器。如果你发过截图之后被问“能看下控制台吗?”或“这是哪个浏览器?”,你就撞过这堵墙。解法不是更好的截图——而是在同一次点击里,让证据随图片一起被捕获。

先截图

打开 ReproKit,捕获可见标签页。这就是它诚实的边界:截的是屏幕上看得到的部分。如果你需要把整个长页面滚动拼接下来,请用专门的整页截图工具——ReproKit 的截图是为记录 bug 而生,不是为存档页面。

附上图片说不出的上下文

截图只是复现包的一部分。在它旁边,扩展还能捕获控制台输出、HAR 格式的网络请求与响应、你的环境(浏览器、系统、视口)和你的操作步骤。开发者打开这个包,看到的是页面的视觉状态加上导致它的失败请求——不用再开着 DevTools 跑第二个来回。

离开你的机器之前先在本地脱敏

截图会泄密。一张仪表盘的截图可能带着客户姓名、邮箱、查询串里的 token。ReproKit 在你的机器上自动遮盖敏感值,并在分享之前让你检查遮了什么。这一步审查权在你——工具提议,你确认。没有任何东西在后台悄悄上传。

作为一个包分享出去

把捕获导出成一个可分享的包,附到工单里。报告者不需要账户——当看到 bug 的人是客户或测试人员时,这正是重点。付费档还能把包直接提交进 Linear 或 GitHub Issues,让截图落到干活的地方。

什么时候截图就够——什么时候不够

改文案、修布局的小毛病,一张普通截图足矣。一旦涉及行为——没加载、没保存、没响应——就该用带日志的捕获。花的同样是一次点击,省下的是那句“无法复现”,和你为它白等的一天。