[google-chrome] Google ChromeでWebSocketをデバッグする


Answers

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

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

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

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

最近公開された私の本「HTML5 WebSocketの決定版ガイド」には、Chrome Dev Tools、Chromeネット内部、Wire Sharkなどのさまざまな検査ツールを網羅した専用の付録もあります。

Question

WebSocketを通過する「トラフィック」を監視できる方法や拡張機能はありますか? デバッグ目的のために、私はクライアントとサーバの要求/応答を見たいと思います。




その他の答えは最も一般的なシナリオです:フレームの内容を見る(開発者ツール - >ネットワークタブ - > websocket接続 - >フレームを右クリックしてください)。

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

chrome://net-internals/#sockets



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

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

Fiddler(FiddlerScript)を使ってWebSocketトラフィックをデバッグ/検査する方法を示すCodeProjectに関する最近書かれた記事を参照してください。 codeproject.com/Articles/718660/…




Chromeバージョン29以降の短い回答:

  1. デバッガを開き、「ネットワーク」タブに移動します。
  2. websocketでページを読み込む
  3. サーバーからのアップグレードレスポンスでwebsocketリクエストをクリックする
  4. 「フレーム」タブを選択すると、WebSocketフレームが表示されます。
  5. Websocketリクエストを再度クリックして、フレームをリフレッシュしてください。



Links