用 1300 行原生 JS 做了一个 Chrome DevTools 扩展

背景

前后端联调时，最常见的场景之一就是接口报错。前端截个图发给后端："这个接口报 500 了"。后端回复："给我看看请求参数"。然后前端再截一张……

这个来回的过程低效且容易遗漏信息。我决定做一个 Chrome DevTools 扩展来解决这个问题。

设计思路

核心目标是一键生成可分享的调试报告，包含：

• 请求 URL、方法、状态码
• 请求头和请求体
• 响应头和响应体
• 错误堆栈（如果有）
• 时间线信息

技术选型

整个扩展用原生 JavaScript 实现，不引入任何框架。理由很简单：

1. DevTools 扩展的运行环境特殊，框架的 overhead 不值得
2. DOM 操作量不大，原生 API 足够
3. 减少打包体积，加快加载速度

// 监听网络请求
chrome.devtools.network.onRequestFinished.addListener((request) => {
  if (request.response.status >= 400) {
    captureFailedRequest(request);
  }
});

核心实现

1. 请求捕获

通过 chrome.devtools.network API 监听所有网络请求，筛选出失败的请求（状态码 >= 400）。

2. 数据结构化

将原始请求数据转换为结构化的报告格式：

function formatRequest(entry) {
  return {
    url: entry.request.url,
    method: entry.request.method,
    status: entry.response.status,
    statusText: entry.response.statusText,
    requestHeaders: entry.request.headers,
    requestBody: entry.request.postData?.text,
    responseHeaders: entry.response.headers,
    timing: entry.time,
    timestamp: new Date().toISOString(),
  };
}

3. 报告生成

将结构化数据渲染为可读的 HTML 报告，支持一键复制到剪贴板。

总结

1300 行代码，零依赖，解决了一个真实的协作痛点。这个项目让我深刻体会到：好的工具不需要复杂，只需要解决真实问题。

完整代码已开源在 GitHub，欢迎 Star。