现已上架 Chrome 应用商店

Request Formatter for DevTools

给 Chrome DevTools 补一块更顺手的请求与响应格式化面板，提升 HTTP 与 WebSocket 调试体验，让请求细节一目了然。

从 Chrome 应用商店获取查看源码

HTTP + WS: 双通道调试
JSON + Form: Payload 自动格式化
Local Only: 本地处理

Panel

把网络细节收进一块专用面板

Request Formatter 不替代 Network 面板，它更像是一个阅读台。左侧保留请求列表，右侧把 Network 里分散的信息按阅读顺序摆好。

POST

https://api.github.com/_private/browser/stats

200 · text/plain · 587 ms

Request BodyCopy

{
  "stats": [
    {
      "name": "browser_vitals_session",
      "type": "count",
      "source": "devtools"
    }
  ]
}

WebSocket MessageCopy

Direction: Received
Type: json
Size: 842 bytes

{
  "event": "deploy.finished",
  "status": "success"
}

Features

为高频调试动作提升效率

围绕网络调试里最常见的几件事：找请求、读 payload、追消息、复制结果。

HTTP 请求整理

URL Params、Headers、Body、Response 和 Timing 放在同一处，打开就能读。

Payload 自动格式化

JSON 和表单数据自动缩进，少一次复制到外部工具的来回切换。

WebSocket 消息追踪

启用后查看握手信息、连接状态、收发方向和 JSON 文本帧，实时链路也能顺着看。

详情搜索与高亮

在右侧详情区用快捷键搜索当前请求或连接内容，命中内容高亮，定位字段更快。

筛选与复制

按 URL、方法或状态过滤列表，也可以暂停捕获噪音请求，随时复制格式化后的片段。

原生 DevTools 使用体验

跟随 DevTools 主题，支持中英文，面板简洁直观。

Usage

使用方式

从商店安装

前往 Chrome 应用商店，将 Request Formatter for DevTools 添加到 Chrome。

打开面板

在目标页面打开 DevTools，切到 Request Formatter，刷新页面或触发接口请求。

定位与复制

找到目标请求，切换标签、搜索字段，需要时直接复制格式化结果。

需要测试开发版本？前往 GitHub Releases 手动安装

Privacy

数据留在浏览器里

它是一个 DevTools 面板，不做后台同步，也不把请求内容发到外部服务。

只看当前会话

扩展只读取你打开 DevTools 并使用该面板时，当前调试会话中 Chrome DevTools API 暴露的数据。

权限使用

clipboardWrite 仅用于复制结果；debugger 仅用于 WebSocket 捕获。

本地数据处理

没有后台服务或远端上报，把敏感调试数据留在浏览器里。

限制说明

响应体可读性仍受 Chrome DevTools API 限制；二进制响应和 WebSocket 二进制帧会保守展示，但你仍可复制原始内容。

Install

把下一次接口排查留在 DevTools 里完成

从 Chrome 应用商店直接安装，打开 DevTools 即可开始。

前往 Chrome 应用商店