web-dev-qa-db-ja.com

Chrome Web Inspector Web Socket Debugging

Google Chrome Web Inspectorの[ネットワーク]タブを使用して、ネットワークトラフィック（AJAXリクエストなど）をデバッグできます。どのデータが簡単に転送されるかを確認できます。しかしWebsocket接続は

Request URL:ws://localhost/...
Request Method:GET
Status Code:101 Switching Protocols
...

転送されたデータが表示されません。 Googleにビルドイン機能はありますかChrome転送されたデータを検査しますか、それともWiresharkを使用する必要がありますか？

PS：最新の安定バージョン（16.0.912.75）を使用しています。新しいバージョン（beta/dev）にこの機能がある場合、それは素晴らしいでしょう。

google-chromewebsocketgoogle-chrome-devtools
35
Fox32

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

  1. websocket.org サイトでホストされている WebSocket Echo demo に移動します。
  2. Chrome開発者ツールをオンにします。
  3. Networkをクリックし、filterを有効にします（左上の3番目のアイコン開発ツール）で表示されるトラフィックをフィルタリングして、WebSocketsをクリックします。
  4. Echoデモで、Connectをクリックします。 Google Dev Toolの[ヘッダー]タブで、WebSocketハンドシェイクを検査できます。
  5. EchoデモのSendボタンをクリックします。
  6. Chrome Developer Toolsの[名前]で、WebSocket接続を表すエントリをクリックします。これにより、右側のメインパネルが更新され、[WebSocketフレーム]タブが実際のWebSocketとともに表示されます。メッセージの内容。

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

67
Peter Moskovits

さらに調査したところ、ここで重複した質問が見つかりました： Google ChromeでWebSocketをデバッグする

Chromeは、現在の安定バージョンでのトラフィックの表示をサポートしていません。 Wiresharkを使用する必要があります。

8
Fox32

別のアイデアは、単純なWebソケットのテストと軽量化のために、Chrome plugin "Simple Web-socket。接続を確立できるかどうかだけを確認したかった。次のChrome plugin「シンプルなWebソケット（リンク： https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo?hl=en ）」はチャームのように機能します。画像を参照してください。

https://lh3.googleusercontent.com/bEHoKg3ijfjaE8-RWTONDBZolc3tP2mLbyWanolCfLmpTHUyYPMSD5I4hKBfi81D2hVpVH_BfQ=w640-h400-e365

0
Shantu