是否有一种方法或扩展,让我观察“流量”通过WebSocket?出于调试目的,我希望看到客户端和服务器的请求/响应。
当前回答
如果你想要更好的体验,我建议使用Postman来调试WebSocket请求。它已经作为一个新功能发布。 https://stackoverflow.com/a/43754722/15988851
其他回答
他们似乎在不断地改变Chrome中的东西,但这里是目前有效的:-)
首先你必须点击红色记录按钮,否则你什么也得不到。 我以前从未注意到WS,但它过滤掉了web套接字 连接。 选择它,然后你可以看到帧(现在称为消息),它将向你显示错误消息等。
如果你没有访问websocket的页面,你可以打开Chrome控制台并输入你的JavaScript:
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
这将打开web套接字,这样您就可以在网络选项卡和控制台中看到它。
我只是发布这篇文章,因为Chrome改变了很多,没有一个答案是最新的。
开放开发工具 刷新您的页面(以便网络选项卡捕获WS连接) 点击你的请求 点击“帧”子选项卡 你应该会看到如下内容:
Chrome 29及以上版本的简短回答:
打开调试器,转到“网络”选项卡 使用websocket加载页面 单击带有服务器升级响应的websocket请求 选择标签“帧”查看websocket帧 再次单击websocket请求刷新帧
其他答案涵盖了最常见的场景:观察帧的内容(开发人员工具->网络选项卡->右击websocket连接->帧)。
如果你想知道更多的信息,比如哪些套接字当前打开/空闲或能够关闭它们,你会发现这个url很有用
chrome://net-internals/#sockets
推荐文章
- 很好的初学者教程socket.io?
- 如何禁用谷歌翻译从HTML在Chrome
- Chrome开发工具:如何找出什么是覆盖CSS规则?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- Chrome iOS(和Safari)的远程调试
- 在Chrome中模拟有限的带宽?
- 资源解释为文档,但使用MIME类型application/zip传输
- 如何让Chrome允许混合内容?
- 了解Chrome网络日志“停滞”状态
- 如何卸载Service Worker?
- jQuery ' .is(":visible") '在Chrome中无效
- 如何保存样式面板的CSS Chrome开发工具的变化?
- 当你双击日文文本时,Chrome如何决定突出显示什么?
- Chrome不会删除会话cookie
- 在Chrome和Firefox中用Javascript报告的神秘的“脚本错误”