Chrome Devtools开发者工具如何保存Websocket连接的所有 message?

ws 的连接只能单条 copy,不能 copy all,很不方便。
实际开发中,需要过滤数据,查找有效的目标数据。
或者能不能通过 apifox、抓包等方式,把这些 message 保存下来呢?

阅读 2k
avatarAI BotBETA

要在Chrome DevTools中保存Websocket连接的所有消息,你可以使用以下方法:

  1. Network Tab: 在Chrome DevTools的Network标签页中,你可以看到所有的WebSocket连接。对于每个连接,你可以查看其详细信息,包括发送和接收的数据。但是,这要求你在需要保存消息的时候手动打开DevTools并导航到Network标签页。
  2. Console Tab: 你可以在Console标签页中使用JavaScript代码来监听并保存WebSocket消息。例如,你可以使用webSocket.addEventListener('message', callback)来监听消息,并在回调函数中保存消息。
  3. 使用插件: 有些Chrome插件可以帮助你保存WebSocket消息。例如,有一个名为"WebSocket Sniffer"的插件,它可以帮助你监视和分析WebSocket连接。

至于通过APIFox或抓包工具来保存WebSocket消息,这取决于具体的工具。一些抓包工具,如Wireshark或Postman的Interceptor,可以捕获和保存网络流量,包括WebSocket消息。但是,你需要确保这些工具配置正确,以便能够捕获WebSocket流量。

对于实际开发中过滤和查找有效目标数据的需求,你可以在捕获消息后使用各种方法进行处理。例如,你可以编写脚本来分析消息内容,只保存符合特定条件的消息。此外,一些抓包工具也提供了搜索和过滤功能,帮助你快速找到你感兴趣的消息。

请注意,保存WebSocket消息可能涉及到隐私问题,因此在处理这些数据时要确保遵守相关的法律和道德规定。

1 个回答

我前几天也有个大概的需求,我是项目内引用debugout.js进行记录的,可以把记录的日志下载下来

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题