WebSocket インスペクターは、ページ上のすべての接続において、送受信されるあらゆる WebSocket フレームをキャプチャします。接続のライフサイクル（接続中／オープン／クローズ、終了コード付き）、フレームごとの方向、サイズ、バイナリフラグ、プレビューを表示し、JSON ペイロードを整形して表示します。リアルタイムプロトコルのデバッグにおける DevTools の不足を補う重要なツールです。
WebSocket は、チャットアプリ、ライブダッシュボード、GraphQL サブスクリプション、マルチプレイヤーゲーム、共同編集エディタなどを支えていますが、そのデバッグは苦痛を伴います。Chrome DevTools でも WebSocket フレームを確認できますが、UI が使いにくくフィルタリングも制限されています。WebSocket インスペクターは、よりクリーンで専用のビューを提供します。このツールは、ページコンテキスト内のネイティブ WebSocket コンストラクタにラッパーをインストールするため、すべての `new WebSocket()` がインターセプトされます。各接続は、URL、ステータス（接続中 → オープン → クローズ）、持続時間、切断時の終了コードと共にリストに表示されます。送受信されるすべてのフレームは、タイムスタンプ、方向、サイズ、バイナリフラグ、プレビューと共に記録されます。任意のフレームをクリックすると、JSON の場合は自動的に整形された完全なペイロードが表示されます。方向（送信／受信）、バイナリのみ、または特定の接続でフレームをフィルタリングできます。ラッパーはツールの起動時にインストールされるため、既存の接続を捕捉するにはページをリロードする必要がありますが、新規の接続はツールを開いた瞬間からキャプチャされます。
すべての WebSocket をステータス（接続中／オープン／クローズ）、URL、持続時間、終了コード、および終了理由と共に表示します。
送信 (↑) および受信 (↓) の両方のフレームを、タイムスタンプ、サイズ、バイナリフラグ、インラインプレビューと共に表示します。
フレームをクリックすると完全なペイロードが表示されます。JSON 文字列は、可読性を高めるために 2 スペースのインデントで自動整形されます。
送信のみ、受信のみ、またはバイナリのみにフレームをフィルタリングし、デバッグ対象に集中できます。
接続をクリックすると、その接続のフレームのみを表示します。複数の WebSocket がアクティブ（例：チャット + 在席確認）な場合に便利です。
ツールの起動後に開かれた WebSocket は即座にキャプチャされます。リロードが必要なのは、起動前から存在していた接続を捕捉する場合のみです。
クライアントとサーバー間で送受信されるメッセージを正確に追跡し、どこの配信で失敗しているかを特定します。
サブスクリプション操作と着信データプッシュを検査し、ペイロードの不一致やサブスクリプション終了のバグをデバッグします。
サードパーティのリアルタイム API のメッセージ構造とタイミングを観察することで、その動作の仕組みを理解します。
キープアライブフレームが期待通りの間隔で送信されているか検証します。Ping の欠落が予期せぬ切断の原因である場合があります。
終了イベント（コードと理由付き）とその後の新しい接続試行を監視し、リトライ／再接続のバグをデバッグします。
DevSuite Pro のドックにある WebSocket アイコンをクリックします。ツールが起動し、接続とフレームを表示するパネルが開きます。
ツールの起動前に開かれた WebSocket はキャプチャされません。リロードして再作成させることで、最初からインターセプトされます。
ページが WebSocket を開くと、接続リストに表示され、ステータスがリアルタイムで更新されます。
すべてのフレームがリアルタイムで記録されます。方向でフィルタリングしたり、接続をクリックしてリストを絞り込んだりできます。
任意のフレームをクリックして、完全なペイロード（該当する場合は整形された JSON）と、タイムスタンプ、サイズ、バイナリフラグを確認します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
