Chrome ウェブストアで公開中

Request Formatter for DevTools

Chrome DevToolsに、リクエストとレスポンスを見やすく整形するパネルを追加。HTTPとWebSocketのデバッグ体験を高め、リクエストの詳細をひと目で確認できます。

Chrome ウェブストアから入手ソースコードを見る最新情報

HTTP + WS: 2つのデバッグフロー
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を読み、メッセージを追跡し、結果をコピーする。すべてDevTools内で完結します。

HTTPリクエストを整理

URLパラメータ、Headers、Body、Response、Timingを一か所にまとめ、開くだけで確認できます。

Payloadを自動整形

JSONとフォームデータを自動でインデントするため、外部の整形ツールに移す必要がありません。

WebSocketメッセージを追跡

リアルタイム通信に必要なハンドシェイク、接続状態、送受信方向、JSONテキストフレームを確認できます。

詳細を検索・ハイライト

ショートカットで現在のリクエストや接続の詳細を検索し、一致したフィールドをすばやく見つけられます。

絞り込みとコピー

URL、メソッド、ステータスで一覧を絞り込み、ノイズの多いキャプチャを一時停止して整形結果をコピーできます。

DevTools本来の操作感

DevToolsのテーマに追従し、中国語・英語・日本語に対応したシンプルで直感的なパネルです。

Usage

使い方

ストアからインストール

Chrome ウェブストアを開き、Request Formatter for DevToolsをChromeに追加します。

パネルを開く

対象ページでDevToolsを開き、Request Formatterに切り替えてからページを更新するかAPIリクエストを実行します。

確認してコピー

対象のリクエストを選び、タブを切り替えてフィールドを検索し、必要に応じて整形結果をコピーします。

開発版を試しますか？ GitHub Releasesから手動インストール

Privacy

デバッグデータはブラウザ内に保持

DevToolsパネルとして動作し、同期用バックエンドはなく、リクエスト内容を外部サービスへ送信しません。

現在のセッションのみ

パネルを開いてアクティブなデバッグセッションを使用している間、Chrome DevTools APIが公開するデータだけを読み取ります。

権限の範囲

clipboardWriteは結果のコピーに、debuggerはWebSocketのキャプチャにのみ使用します。

ローカル処理

リモートの報告サービスはないため、機密性の高いデバッグデータはブラウザ内に留まります。

制限事項

レスポンスボディの取得はChrome DevTools APIの制限を受けます。バイナリレスポンスとWebSocketバイナリフレームは控えめに表示しますが、生の内容はコピーできます。

Updates

次のAPI調査もDevTools内で完結

Chrome ウェブストアからインストールし、DevToolsパネルですぐに始められます。

Chrome ウェブストアへ