Chrome 扩展 · 报障现场

报 bug,
不用再追问现场

在出问题的页面点一下悬浮球(或按 ⌘⇧B / Ctrl+Shift+B)截图圈出问题, 需要时再录 30 秒屏。网络请求、JS 报错、选中的元素和页面环境已经自动收好—— 填一行标题,提交到团队自己的 bug 系统。

Chrome 111+ 数据只发你的后端 开源 · 可自建

zip 解压后,在 chrome://extensions 用「加载已解压的扩展程序」安装。

The pain

一条 bug 的现场,本来就在浏览器里

测试发现「按钮点了没反应」,传统流程要截图、开 DevTools 抄请求、复制堆栈、回忆操作路径,再写一段开发看得懂的话。单条 5–15 分钟,关键现场还常常缺。

以前:在群里追问

  • ✕一张截图 + 一句「点了没反应」
  • ✕开发追问:什么请求?报什么错?
  • ✕自己开 F12 抄请求,容易漏、容易错
  • ✕消息被聊天淹没,没指派、没状态、不了了之

差距不在「说得清不清楚」,而在现场证据是否能跟着问题一起走。

现在:从页面直接提交

  • ✓一键截图标注,或按 ⌥⇧R 录 30 秒
  • ✓请求、报错、元素、环境自动附上
  • ✓提交到 Webhook 或禅道,拿回单号和链接
  • ✓本地历史可回查状态,失败自动重试

人只负责圈出问题、说清现象;机器负责把现场完整带走。

Auto capture

你还没点报障,现场已经记好了

注入页面真实 JS 世界的钩子,在问题发生时就开始记录。打开弹窗时,证据已经在里面。

截图标注

矩形、圆、箭头、指针、文字、马赛克六种工具,多色线宽可调,支持撤销重做。密码框自动遮罩。

30 秒录屏

按 ⌥⇧R / Alt+Shift+R 启动,最长 30 秒自动停。录制中点击会显示红圈涟漪,开发看得清你点了哪。

网络请求

最近 50 条 fetch / XHR,含方法、URL、头、请求体、响应、耗时和状态码。单条 body 超 20 KB 截断,不拖垮页面。

JS 报错

未捕获异常与 Promise rejection,带堆栈、文件和行列号;高频重复错误自动去重,不刷屏。

选元素

进入拾取模式,点中出问题的元素,自动生成 selector 附进报告。不用手写 DOM 路径。

存储与环境

按项目配置的白名单 key 读取 localStorage / sessionStorage;URL、UA、视口尺寸、时间戳自动附带。

DevTools 面板

F12 里的「Moo」面板实时查看请求与报错时间线、JSON 高亮与搜索。不想开 F12 也能用独立工作区。

多项目自动匹配

按域名通配规则自动切换项目;同一项目可配多个服务器(开发 / 预发 / 线上),提交时下拉选择。

Three steps

三步提交,人工只做该做的

现场是自动采的,人只需圈出问题、写清现象、点提交。

1

在出问题的页面唤起

命中的页面右下角会出现悬浮球,可拖拽、可对当前站点临时隐藏。也可以直接用快捷键。

⌘ / Ctrl + Shift + B截图报障
2

圈出问题

在截图上画框、圈选、加文字;或者录一段 30 秒屏;也可以进入选元素模式,点中出问题的控件。

⌥⇧R / Alt+Shift+R开始录屏
3

填标题、勾现场、提交

请求与报错逐条勾选要带哪些;选目标服务器。提交后回显远端单号和直达链接,失败则进入重试队列。

提交直达 bug 看板

Channels

提交到你已经有的系统

通道差异收口在统一的适配层,Webhook 和禅道共用同一套提交编排、附件与重试逻辑。

通用 Webhook

POST 到团队自建后端,payload 模板可用占位符自定义(标题、截图、视频、请求、报错等)。

  • JSON / multipart 两种提交体
  • 自定义请求头与 token 注入
  • 提交前可预览最终 JSON

禅道直连

免后端开发,直接建 bug 单。兼容不同实例的 API schema 差异。

  • v2 接口优先,无法解析时自动回退 v1
  • 附件 multipart 上传,401 自动重登
  • 产品、模块、人员下拉自动发现

历史与重试

提交不是终点:本地留最近 30 条记录,可回查远端状态、手动重提。

  • 网络错 / 5xx 自动入队,最多重试 5 次
  • 90 秒全局 + 60 秒单条冷却,防重复建单
  • 录屏体积大不自动重试,可在历史里手动重提

Install

下载并安装 0.8.18

当前以 zip 分发,通过 Chrome 的开发者模式加载。装好后还需要在扩展弹窗里开启上报权限,悬浮球才会出现。

Moo Dev Tool

Chrome 扩展 · 解压即用
最新版
版本
0.8.18
安装包
218 KB · zip
Chrome
111 或更高
平台
macOS / Windows / Linux
安装方式
开发者模式 · 加载已解压的扩展
下载 moo-chrome-dev-tool-0.8.18.zip
校验 SHA-256
982a6799d19b67c4dff1a0535c59c600ba2028dd6d8f0f69104a02610ae1e546
1

下载并解压

下载上面的 zip,解压得到 moo-chrome-dev-tool/ 目录(内含 manifest.json)。

2

打开扩展管理页

地址栏输入 chrome://extensions/,打开右上角「开发者模式」。

3

加载已解压的扩展

点「加载已解压的扩展程序」,选择刚才解压出来的 moo-chrome-dev-tool/ 目录。

4

开启上报权限

点浏览器工具栏的 Moo 图标,打开「允许向上报服务器发送请求」。这步不做,悬浮球不会出现。要用录屏的顺手打开「录屏功能」。

5

配一个项目

按 F12 打开 DevTools 的「Moo」面板(或点扩展图标 → 打开工作区),在「环境」里新建项目:填项目名、监控网址(支持通配)、上报服务器 URL 和项目 Token。刷新页面,右下角出现 M 悬浮球即配置成功。

更新方式:下载新版本 zip 覆盖原解压目录,然后到 chrome://extensions 点该扩展的刷新按钮。配置与本地历史保存在扩展存储里,目录不变时通常会保留。

Security & privacy

它能读页面,所以更要克制

隐私与最小权限是贯穿性设计,不是事后补丁。

最小权限

站点访问是可选权限,只有你主动授权、且命中项目配置的页面才会注入,不做全站注入。

封闭 Shadow DOM

扩展 UI(包括你填的标题、描述和截图)运行在 closed shadow DOM 中,对宿主页脚本不可见。

提交前脱敏

请求头与请求体里的 18 个常见敏感字段(authorization、cookie、password、token 等)在进入缓冲前打码;密码框截图自动遮挡。

数据不出企业

所有数据只发往你自己配置的 Webhook 或禅道实例,扩展不内置任何第三方数据收集。

FAQ

常见问题

装不上或配不通,先看这里。

装好了,为什么页面上没有悬浮球?

按顺序检查三件事:① 点 Moo 图标,确认「允许向上报服务器发送请求」已打开;② DevTools「Moo」面板里的项目已启用,且当前网址命中了项目的域名规则;③ 刷新页面。三项都满足后,右下角才会出现 M 悬浮球。

录屏按钮点了没反应?

Chrome 要求录屏必须在用户手势(键盘 / 扩展图标)上下文里启动,页面里的按钮无法调起。请使用 ⌥⇧R(Mac)或 Alt+Shift+R(Windows),并先在 Moo 图标弹窗里打开「录屏功能」开关。

支持哪些网站?

任意 http / https 页面都可以,但只有命中项目里配置的网址规则时才会启用。规则支持通配,例如 https://*.example.com/*。扩展不会向未匹配的站点注入。

采集的数据发到哪里?

只发往你在项目里配置的上报地址:自建 Webhook,或团队的禅道实例。扩展本身不包含任何第三方统计或远程遥测。

提交失败会丢数据吗?

网络错误或 5xx 会自动进入重试队列,最多重试 5 次。录屏文件体积较大,不进入自动重试队列;提交失败的录屏可以在「历史」里手动重新提交。

为什么不是在 Chrome 应用商店安装?

这是给团队内部使用的报障工具,需要填写自己的上报地址与 Token,因此以 zip 形式分发,用开发者模式加载。想从源码构建,可以看 GitHub 仓库。

让下一条 bug 自带现场

团队内部工具,数据走自己的后端;不使用时,随时可以在 chrome://extensions 移除。