メインコンテンツまでスキップ

Custom Previewer Tab（カスタムプレビュータブ）

Proxyman のカスタムプレビュータブを追加して、リクエストやレスポンスのボディを JSON、Protobuf、HTML、MessagePack として表示したり、Connection Log タブを追加したりできます。

1. カスタムプレビュータブとは​

カスタムプレビュータブを使うと、リクエストとレスポンスのパネルに追加のタブを表示できます。各タブは、常に 1 つの形式でコンテンツを表示します。

このツールは、次のような場合に役立ちます：

  • Content-Type は application/json ではないが、ボディを JSON として整形する
  • Content-Type は application/x-protobuf ではないが、ボディを Protobuf として整形する
  • HTML ページを Web View でレンダリングする
  • minify されたファイル（HTML、CSS、JS）を 整形（Beautify）する
  • Multipart/form-data の表示
  • Content-Type に関係なく、選択した形式でボディの整形を試す
  • MessagePack（msgpack）を JSON に変換する
  • Code Generator で Swift、Node、JavaScript、cURL などのコードを生成する
  • GraphQL Query の整形（Prettier）
  • Connection Log で DNS、TCP、TLS、HTTP の詳細を確認する
Request と Response のチェックボックスがあり、Connection Log にチェックが入っている Proxyman の Custom Body Previewer Tabs ウィンドウ（Add Custom Tabs を含む）

Request / Response パネルのカスタムタブを選択する

備考

選択したカスタムタブは、Request または Response ビューの右側に追加されます。

2. 使い方​

カスタムプレビュータブのウィンドウを開くには：

  1. Request / Response タブバーの「+」ボタンをクリックするか、Tools → Custom Previewer Tab… を開きます。
  2. チェックボックスをオンまたはオフにして、カスタムタブを表示または非表示にします。
  3. 新しいタブが Request または Response パネルに表示されます ✅

2.1 Server-Sent Events と OpenAI タブ​

Proxyman 5.22.0 以降では、次をサポートしています：

  • SSE タブ：OpenAI エンドポイントの Server-Sent Events 用です。各データイベントのインライン JSON を自動で整形します。
  • OpenAI タブ：ストリーミングされたコンテンツを自動で結合し、チャットビューの出力と同様の最終結果を表示します。

2.2 接続ログ​

  • Connection Log には、選択したリクエストの接続情報が表示されます。DNS 名前解決、TCP 接続、TLS ネゴシエーション、証明書、HTTP ヘッダーが含まれます。
  • Request タブバーの + をクリックします。Request の下で、Connection Log にチェックを入れると表示され、チェックを外すと非表示になります。
  • タブは Request パネルの Summary の隣に表示されます。既定で有効になっており、Proxyman は選択内容を記憶します。
  • サンプルのログは HTTP/2 ガイド を、すべての項目は 接続ログのガイド を参照してください。

3. ⚡️ 応用：Scripting ツールでカスタムタブを作成する​

  • ✅ タブに独自のデータを表示できます
  • ボディをデコードしたい場合や、ボディの一部を独自のタブに表示したい場合に便利です

使い方​

  1. Request / Response タブバーの「+」ボタンをクリックするか、Tools → Custom Previewer Tab… を開きます。
  2. Add Custom Tabs ボタンをクリックします。
  3. Request または Response パネルを選択し、タブの名前を設定します。
  4. 「...」ボタンをクリックして、JavaScript のコードを表示します。
  5. Scripting → Script List… を開き、新しいスクリプトを作成して、このコードで独自のデータを表示します。
onRequest と onResponse で customPreviewerTabs の値を設定している Proxyman のスクリプトエディタ

コードを書いてデータを表示する

  1. 完了です。
スクリプトから取得したデータが入ったカスタムボディタブと json タブを表示している Proxyman

新しいタブにデータを表示する

4. 例​

JSON TreeView を強制的にレンダリングする​

Proxyman は、より見やすく表示するための JSON Tree View をサポートしています。

列ヘッダーを右クリックして、列の表示と非表示を切り替えられます。

HTML ページを強制的にレンダリングする​

Response パネルのリストで HTML Webview にチェックを入れると、HTML レスポンスを生の HTML として読むのではなく、Web ページとしてレンダリングできます。

JavaScript ファイルを整形する​

カスタムプレビュータブのウィンドウ下部にある Auto beautify the minified content にチェックを入れます。すると Proxyman は、minify された HTML、CSS、JavaScript を読みやすく整形します。

関連情報​

に最終更新