Google ChromeでのWebSocketのデバッグ

WebSocketを通過する「トラフィック」を監視する方法または拡張機能はありますか？デバッグのために、クライアントとサーバーの要求/応答を確認します。

Chrome開発者ツールに、WebSocketフレームを一覧表示する機能と、フレームがバイナリでない場合はデータを検査する機能が追加されました。

処理する：

1. Chromeデベロッパーツールを起動する
2. ページを読み込み、WebSocket接続を開始します
3. [ ネットワーク]タブをクリックします。
4. WebSocket接続を選択します左側のリストからをます（「101スイッチングプロトコル」のステータスになります）。
5. 「メッセージ」サブタブをクリックします。バイナリフレームは、長さとタイムスタンプとともに表示され、それらがマスクされているかどうかを示します。テキストフレームには、ペイロードコンテンツも含まれます。

WebSocket接続がバイナリフレームを使用している場合でも、おそらくWiresharkを使用して接続をデバッグする必要があります。Wireshark 1.8.0は、WebSocketのディセクタとフィルタリングのサポートを追加しました。代替案は、この他の答えで見つけることができます。

Chrome CanaryとChromiumにWebSocketメッセージフレーム検査機能が追加されました。これをすばやくテストする手順は次のとおりです。

1. websocket.orgサイトでホストされているWebSocket Echoデモに移動します。
2. Chromeデベロッパーツールを有効にします。
3. [ ネットワーク ]をクリックし、開発ツールで表示されるトラフィックをフィルタリングするには、[ WebSockets ]をクリックします。
4. Echoデモで、[ 接続 ]をクリックします。Google Dev Toolの[Headers]タブで、WebSocketハンドシェイクを検査できます。
5. Echoデモの[送信]ボタンをクリックします。
6. この手順は重要です：ChromeデベロッパーツールでWebSocketフレームを表示するには、[名前/パス]で、WebSocket接続を表すecho.websocket.orgエントリをクリックします。これにより、右側のメインパネルが更新され、[WebSocketフレーム]タブに実際のWebSocketメッセージコンテンツが表示されます。

注：新しいメッセージを送受信するたびに、左側のecho.websocket.orgエントリをクリックしてメインパネルを更新する必要があります。

スクリーンショットとビデオでステップを投稿しました。

私が最近出版した本、The Definitive Guide to HTML5 WebSocketにも、Chrome Dev Tools、Chrome net-internals、Wire Sharkなどのさまざまな検査ツールをカバーする専用の付録があります。

彼らはChromeで継続的に何かを変えているようですが、これが現在機能しているものです:-)

• まず、赤いレコードボタンをクリックする必要があります。そうしないと何も表示されません。

• WS以前は気づかなかったが、Webソケット接続がフィルターで除外される。

• それを選択すると、エラーメッセージなどを表示するフレームが表示されます。

WebSocketにアクセスしているページがない場合は、Chromeコンソールを開いてJavaScriptを次のように入力できます。

var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }

これによりWebソケットが開き、ネットワークタブとコンソールに表示されます。

他の答えは最も一般的なシナリオをカバーしています：フレームのコンテンツを見てください（開発ツール->ネットワークタブ-> WebSocket接続を右クリック->フレーム）。

どのソケットが現在開いているかアイドル状態にあるか、またはそれらを閉じることができるかなど、さらに多くの情報を知りたい場合は、このURLが便利です。

chrome://net-internals/#sockets

3つのオプションがあります：Chrome（[開発者ツール]-> [ネットワーク]タブ）、Wireshark、およびFiddler（[ログ]タブ）ですが、すべて非常に基本的です。トラフィック量が非常に多い場合、または各フレームが非常に大きい場合、それらをデバッグに使用することは非常に困難になります。

ただし、FiddlerとFiddlerScriptを使用して、HTTPトラフィックを予測するのと同じ方法でWebSocketトラフィックを検査できます。このソリューションのいくつかの利点は、複数のインスペクター（HexView、JSON、SyntaxView）など、Fiddlerの他の多くの機能を活用し、パケットを比較し、パケットを見つけることができることです。

Fiddlerで（FiddlerScriptを使用して）WebSocketトラフィックをデバッグ/検査する方法を示した、CodeProjectについて最近書いた記事を参照してください。http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Chromeが大幅に変更されたため、私はこれを投稿しているだけで、回答はまったく最新のものではありませんでした。

1. オープン開発ツール
2. ページを更新します（WS接続がネットワークタブによってキャプチャされるようにするため）
3. リクエストをクリック
4. 「フレーム」サブタブをクリックします
5. 次のようなものが表示されます。

Chromeバージョン29以降の簡単な回答：

1. デバッガーを開き、「ネットワーク」タブに移動します
2. WebSocketでページを読み込む
3. サーバーからのアップグレード応答を含むwebsocket要求をクリックします
4. [フレーム]タブを選択して、WebSocketフレームを表示します
5. フレームを更新するには、もう一度websocketリクエストをクリックしてください

Chromeデベロッパーツールでは、開かれた接続中に保留中のハンドシェイクリクエストを確認できますが、私の知る限りトラフィックを確認できません。ただし、たとえばそれを嗅ぐことができます。

私はユーザーhakoberaによって公開されているSimple WebSocket Client v0.1.3と呼ばれるChrome拡張機能を使用しました。使い方は非常に簡単で、特定のURLでWebソケットを開いたり、メッセージを送信したり、ソケット接続を閉じることができます。それは非常にミニマルです。

私が使い始めたツールについては、Firemanp ItがPostmanのようですが、websocketsとsocket.ioもサポートしています。