Available on the Chrome Web Store

Request Formatter for DevTools

A cleaner request and response formatting panel for Chrome DevTools, built to make HTTP and WebSocket debugging easier to read.

Get it on Chrome Web Store View source

HTTP + WS: Two debugging flows
JSON + Form: Readable payloads
Local Only: Processed locally

Panel

Put request details in a dedicated reading surface

Request Formatter does not replace the Network panel. It gives you a focused reading surface: requests stay on the left, while headers, payloads, responses, timing, and socket messages are arranged on the right.

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

Boost efficiency for high-frequency debugging operations

Find requests, read payloads, trace messages, and copy the result without leaving DevTools.

HTTP request overview

URL params, headers, body, response, and timing live in one readable place.

Automatic payload formatting

JSON and form data are indented automatically, so you do not need a second formatting tool.

WebSocket message tracing

Inspect handshakes, connection state, direction, and JSON text frames when real-time flows matter.

Search and highlight

Search the current request or socket detail area with keyboard shortcuts and jump to matching fields faster.

Filter and copy

Filter by URL, method, or status, pause noisy captures, and copy formatted snippets whenever needed.

Native DevTools feel

Follows the DevTools theme, supports Chinese and English, and keeps the panel direct and familiar.

Usage

How it works

Install from the store

Open the Chrome Web Store and add Request Formatter for DevTools to Chrome.

Open the panel

Open DevTools on your target page, switch to Request Formatter, then refresh or trigger requests.

Inspect and copy

Select a request, switch detail tabs, search fields, and copy formatted output when needed.

Testing a development build? Install manually from GitHub Releases

Privacy

Debug data stays in your browser

This is a DevTools panel. It has no sync backend and does not send request content to external services.

Current session only

The extension only reads data exposed by the Chrome DevTools API while the panel is open in your active debugging session.

Permission scope

clipboardWrite is used for copying output; debugger is used only for WebSocket capture.

Local processing

There is no remote reporting service, so sensitive debugging data stays inside the browser.

Clear limitations

Response body access still follows Chrome DevTools API limits. Binary responses and binary WebSocket frames are shown conservatively, while raw content remains copyable.

Install

Keep the next API investigation inside DevTools

Install from the Chrome Web Store and start from the DevTools panel.

Open Chrome Web Store