web-dev-qa-db-ja.com

Firebugまたはその他を使用してWS / WSS Websocketリクエストコンテンツを表示する方法

Websocketトラフィックを表示する方法はありますか？

最初のハンドシェイクでは、Websocketヘッダーのみが表示されます。

応答後にすべてが消えます：

Connection  Upgrade
Sec-WebSocket-Accept    EQqklpK6bzlgAAOL2EFX/nx8bEI=
Upgrade WebSocket

Firebug、Live Headers、およびFiddler2を使用して交換を追跡しましたが、すべてログ記録が停止しました。

firebugwebsocketfiddler
66
Stevko

Chromeのデベロッパーツールをお試しください。

  1. 「ネットワーク」タブをクリックします
  2. 下部のフィルターを使用して、WebSocket接続のみを表示します）、
  3. 目的のWebSocket接続を選択し、
  4. 右側に「ヘッダー」、「プレビュー」、「応答」などのサブタブがあることに注意してください。
  5. データが流れ始めると、「WebSocket Frames」サブタブが表示されます。どちらの方向に向かうデータもすべて記録されます。非常に有益です。
68
Daniel Shields

2014年9月3日現在、FireBugでのWebSocketデバッグはホース内にあるようです： https://getfirebug.com/wiki/index.php/Firebug_2.0_Roadmap#Feature_Overview 。しかし、リリース日は言及されていません。

2017-11-24を更新Firefoxのプラグインシステムが変更されました。 Websocket Monitorは執筆中です:(

2016-04-06更新

Firefox開発ツールの Websocket Monitor アドオンを使用すると、FirefoxでのWebSocketデバッグが最終的に可能になります！ Firebug開発チームによって開発され、そのソースは こちら にあります。

2015-10-28を更新

Firefox開発ツールのプロダクトマネージャー、Jeff Griffiths：

プラットフォームサポートは本日夜間に行われ、プロトタイプアドオンはここで作業されています： https://github.com/firebug/websocket-monitor

https://Twitter.com/canuckistani/status/6593991405902848

Firefox Bugzillaの関連機能リクエスト： https://bugzilla.mozilla.org/show_bug.cgi?id=1203802

2015-04-08時点で更新

Fiddler 4.5 は、WebSocketトラフィックをネイティブに検査できるようになりました。

2014-09-11を更新

Firebug課題トラッカーの このコメント について：

Firebugチームは現在、FirebugとDevToolsの統合に取り組んでいるため、現在のところレーダーから外れています。これは、組み込みのDevToolsが提供する機能を再利用できることを意味します。したがって、 https://bugzil.la/885508 に従うことができます。

34
Epoc

Fiddlerの現在のバージョンは、WebSocketトラフィックで問題なく動作します。 http://blogs.msdn.com/b/fiddler/archive/2011/11/22/fiddler-and-websockets.aspx を参照してください

http://blogs.telerik.com/fiddler/posts/13-06-04/what-s-new-in-fiddler-2-4-4-5 を参照してください。 Logタブのデータ。

WebSocketsタブにデータを表示するには、

WebSockets tab

拡張機能が必要です（これは、バージョン2.5に組み込まれる予定です）。今のところ、 現在のビット を取得できます。 Zipを解凍し、2つのファイルを\Fiddler2\Scriptsフォルダーを開き、Fiddlerを再起動します。 FiddlerのWebSessionsリストでWebSocketセッションをダブルクリックすると、WebSocketsタブが表示されます

20
EricLaw

WebSocket Monitor -WebSocket接続の監視に使用できるFirefox開発者ツールの拡張機能があります

拡張機能をインストールしたら、Firefox開発ツールを開き、「Webソケット」パネルに切り替えます。現在のページのWSフレームトラフィックを表示しています。次のプロトコルの追加サポートがあります。

  • ソケットIO
  • SockJS
  • WAMP
  • プレーンJSON

WebSockets panel in Firefox DevTools

5
Jan Odvarko

ここで説明した他のオプションほど快適ではありませんが、さまざまな状況で役立つ汎用ツール： wireshark を使用します。 TCPについてある程度の知識があれば、言及されている他のツールでは解決できない問題（予期しない切断など）をデバッグできます。 Firebugなどのように）実際のwebsocketメッセージを読み取ります。

Wiresharkの欠点は、暗号化された接続で作業するのがかなり面倒であることです。

試してみてください。Rails Python websocketバックエンドと通信するアプリ。

2
jupp0r

Chrome=開発者ツールを使用

enter image description here

enter image description here

[フレーム]タブでデータが変更されます。

1
kiranvj

ChromeとWiresharkを使用してWebSocketメッセージをデバッグする方法の詳細を以下に投稿しました。

https://blogs.Oracle.com/arungupta/entry/logging_websocket_frames_using_chrome

1
Arun Gupta