是否有一种方法或扩展,让我观察“流量”通过WebSocket?出于调试目的,我希望看到客户端和服务器的请求/响应。
当前回答
如果你没有访问websocket的页面,你可以打开Chrome控制台并输入你的JavaScript:
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
这将打开web套接字,这样您就可以在网络选项卡和控制台中看到它。
其他回答
Chrome Canary和Chromium现在有WebSocket消息帧检查功能。下面是快速测试的步骤:
Navigate to the WebSocket Echo demo [dead as of 2022], hosted on the websocket.org site https://echo.websocket.events/.ws (run by the company Lob) or you can locally run the Echo Server project. Turn on the Chrome Developer Tools. Click Network, and to filter the traffic shown by the Dev Tools, click WebSockets. In the Echo demo, click Connect. On the Headers tab in Google Dev Tool you can inspect the WebSocket handshake. Click the Send button in the Echo demo. THIS STEP IS IMPORTANT: To see the WebSocket frames in the Chrome Developer Tools, under Name/Path, click the echo.websocket.org 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.
注意:每次发送或接收新消息时,您都必须通过单击左侧的echo.websocket.org条目来刷新主面板。
我还发布了这些步骤的屏幕截图和视频。
我最近出版的书,The Definitive Guide to HTML5 WebSocket,也有一个专门的附录,涵盖了各种检查工具,包括Chrome Dev tools, Chrome net-internals和Wire Shark。
Chrome开发工具允许看到握手请求在打开连接期间保持等待,但据我所知,你不能看到流量。但是你可以闻一下。
Chrome 29及以上版本的简短回答:
打开调试器,转到“网络”选项卡 使用websocket加载页面 单击带有服务器升级响应的websocket请求 选择标签“帧”查看websocket帧 再次单击websocket请求刷新帧
如果你想要更好的体验,我建议使用Postman来调试WebSocket请求。它已经作为一个新功能发布。 https://stackoverflow.com/a/43754722/15988851
他们似乎在不断地改变Chrome中的东西,但这里是目前有效的:-)
首先你必须点击红色记录按钮,否则你什么也得不到。 我以前从未注意到WS,但它过滤掉了web套接字 连接。 选择它,然后你可以看到帧(现在称为消息),它将向你显示错误消息等。
推荐文章
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- Access-Control-Allow-Origin不允许Origin < Origin >
- 如何设置断点在内联Javascript在谷歌Chrome?
- Chrome调试-打破下一个点击事件
- 谷歌Chrome表单自动填充和它的黄色背景
- 如何处理“未捕获(在承诺)DOMException:播放()失败,因为用户没有首先与文档交互。”在桌面与Chrome 66?
- 强制DOM重绘/刷新Chrome/Mac
- 我如何才能使setInterval也工作时,一个标签是不活跃的Chrome?
- 我如何调试一个HTTP POST在Chrome?
- 我如何从谷歌Chrome扩展获得当前选项卡的URL ?
- 调试WebSocket在谷歌Chrome
- 如何在浏览器中检查消失的元素?
- 超出ResizeObserver循环限制