web-dev-qa-db-ja.com

Google ChromeでWebSocketをデバッグする

WebSocketを通過する「トラフィック」を監視できる方法または拡張機能はありますか？デバッグのために、クライアントとサーバーのリクエスト/レスポンスを確認したいと思います。

google-chromewebsocket
185
mellowsoon

Chrome開発者ツールには、WebSocketフレームを一覧表示する機能があり、フレームがバイナリでない場合はデータを検査することもできます。

プロセス：

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

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

233
kanaka

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

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

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

スクリーンショットとビデオの手順 も投稿しました。

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

69
Peter Moskovits

彼らはChromeで絶えず変化しているように見えますが、ここで今うまくいくものがあります:-)

  • 最初に赤い記録ボタンをクリックする必要があります。そうしないと何も表示されません。

  • WSに気づいたことはありませんが、Webソケット接続を除外します。

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

enter image description here

42
Simon_Weaver

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

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

chrome://net-internals/#sockets
36
Riccardo Galli

ウェブソケットにアクセスしているページがない場合は、Chromeコンソールを開いてJavaScriptを入力できます。

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

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

33
Dylan

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

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

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

9
engineforce

Chromeはかなり変更されているので、これを投稿しているだけで、答えはまったく最新のものではありません。

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

enter image description here

4
iuliu.net

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

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

Chrome開発者ツールでは、開いている接続中に保留中のハンドシェイクリクエストを表示できますが、私が知る限りトラフィックを表示できません。ただし、 sniff it などを使用できます。

3
yojimbo87

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

2
DPancs