前端 - Chrome Devtools开发者工具如何保存Websocket连接的所有 message？

Question

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

Answer 1

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

Answer 2

要在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消息可能涉及到隐私问题，因此在处理这些数据时要确保遵守相关的法律和道德规定。