Chrome Web Inspector Web套接字调试 [英] Chrome Web Inspector Web Socket Debugging

问题描述

我可以使用 Google Chrome浏览器检测器中的网络标签调试网络流量（AJAX请求等）。我可以查看哪些数据可以轻松传输。但 Websocket 连接仅显示为

 请求URL：ws：// localhost / ... 
请求方法：GET 
状态码：101转换协议
 ... 
  

我看不到传输的数据。 Google Chrome中是否有内置功能来检查传输的数据？或者我需要使用Wireshark？

PS：我正在使用最新的稳定版本（16.0.912.75）。如果新版本（测试版/开发版）具有此功能，那就太好了。 现在Chrome和Chromium已经有了WebSocket消息框架检查。以下是快速测试的步骤：

1. 导航到 WebSocket Echo演示，托管在 websocket.org 站点上。


2. 开启Chrome开发人员工具。


3. 点击网络，启用过滤器在开发人员工具中显示的流量，然后单击 WebSockets 。
   
4. 在Echo demo中，单击连接即可。在Google Dev Tool的Headers选项卡中，您可以检查WebSocket握手。


5. 单击Echo演示中的发送按钮。


6. 要查看Chrome开发人员工具中的WebSocket框架，请在名称下单击代表WebSocket连接的条目。这会刷新右侧的主面板，并使WebSocket Frames选项卡显示实际的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
...

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: 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 and Chromium now have WebSocket message frame inspection. Here are the steps to test it quickly:

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.

I also posted the steps with screen shots and video.

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