google-chrome - Chrome Web Inspector Web Socket 调试

Question

我可以使用 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)具有此功能，那就太好了。

Answer 1

Chrome 和 Chromium 现在具有 WebSocket 消息帧检查功能。以下是快速测试的步骤:

1. 导航至 WebSocket Echo demo ，托管于 websocket.org网站。
2. 打开 Chrome 开发者工具。
3. 点击网络，启用过滤器(开发工具顶部左侧第三个图标)以过滤开发工具显示的流量，然后点击 WebSocket。
4. 在 Echo 演示中，点击连接。在 Google 开发工具的“ header ”选项卡上，您可以检查 WebSocket 握手。
5. 点击 Echo 演示中的发送按钮。
6. 要在 Chrome 开发者工具中查看 WebSocket 帧，请在“名称”下单击代表您的 WebSocket 连接的条目。这会刷新右侧的主面板，并使“WebSocket 框架”选项卡显示出实际的 WebSocket 消息内容。

我还发布了 steps with screen shots and video 。