Chrome Web Inspector Web Socket 调试 [英] Chrome Web Inspector Web Socket Debugging

问题描述

我可以使用 Google Chrome Web Inspector 中的网络选项卡来调试网络流量(AJAX 请求等).我可以轻松检查传输了哪些数据.但是 Websocket 连接只显示为

I can use the Network tab in the Google Chrome Web Inspector to debug the network traffic (AJAX requests, etc.). I can check what data is transferred easily. But Websocket connections only show as

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

我看不到传输的数据.谷歌浏览器中是否有任何内置功能来检查传输的数据?还是我需要使用 Wireshark?

and I can't see the transferred data. Is there any build in feature in Google Chrome to inspect the transferred data? Or do I need to use Wireshark?

PS:我使用的是最新的稳定版本 (16.0.912.75).如果较新的版本(测试版/开发版)具有此功能，那就太好了.

PS: I'm using the latest stable version (16.0.912.75). If a newer version (beta/dev) has this features, it would be nice.

推荐答案

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

Chrome and Chromium now have WebSocket message frame inspection. Here are the steps to test it quickly:

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

1. Navigate to the WebSocket Echo demo, hosted on the websocket.org site.
2. Turn on the Chrome Developer Tools.
3. Click Network, enable filter (3rd icon from the left on the top of Dev Tools) to filter the traffic shown by the Developer Tools, and click WebSockets.
4. In the Echo demo, click Connect. On the Headers tab in Google Dev Tool you can inspect the WebSocket handshake.
5. Click the Send button in the Echo demo.
6. To see the WebSocket frames in Chrome Developer Tools, under Name, click the entry representing your WebSocket connection. This refreshes the main panel on the right and makes the WebSocket Frames tab show up with the actual WebSocket message content.

我还发布了步骤带有屏幕截图和视频.

这篇关于Chrome Web Inspector Web Socket 调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！