Chrome中可抓取WebSocket通信：一、Network面板勾选WS过滤器查看握手及帧数据；二、Frames页分析双向消息；三、通过SSL密钥日志+Wireshark解密WSS明文；四、Console注入监听器捕获事件。
如果您在调试网页应用时需要观察 WebSocket 的实时通信过程，但无法在 Chrome 开发者工具中定位到相关连接或消息，则可能是由于过滤设置未启用或连接尚未触发。以下是抓取并分析 WebSocket（包括 wss:// 加密连接）的具体操作路径：
一、启用 Network 面板并筛选 WebSocket 请求
Chrome 开发者工具的 Network 面板默认不自动聚焦 WebSocket 流量，需手动激活 WS 过滤器以隔离长连接通信。该步骤确保仅显示协议为 ws 或 wss 的握手及后续帧数据，避免被大量 HTTP 资源干扰。
1、在 Chrome 浏览器中打开目标网页。
2、按下 F12 或 Ctrl + Shift + I（Windows/Linux）/ Cmd + Option + I（macOS） 打开开发者工具。
3、点击顶部标签栏中的 Network 选项卡。
4、在面板左上角的过滤器区域，勾选 WS 复选框（部分版本需点击 Filter 后输入 ws 或 wss 并回车）。
5、刷新当前页面，触发 WebSocket 握手请求并使其出现在列表中。
二、查看 WebSocket 连接详情与帧数据
WebSocket 连接在 Network 列表中以独立条目呈现，其 URL 以 ws:// 或 wss:// 开头。点击该条目后，右侧将展开详细视图，其中 Frames 标签页提供客户端与服务端双向收发的消息内容、时间戳及数据长度，是分析通信逻辑的核心区域。
1、在 Network 列表中找到协议列为 ws 或 wss 的请求项。
2、单击该项，在右侧切换至 Frames 子标签页。
3、确认消息列表是否已加载：若为空，可尝试先切换至 Headers 再切回 Frames 强制刷新视图。
4、每条消息左侧标注 client 或 server，右侧显示消息类型（Text/Binary/Close）及原始载荷。
三、捕获 TLS 加密层下的 WSS 明文数据
对于 wss:// 连接，Chrome 默认不暴露解密后的 WebSocket 帧内容，因其依赖底层 TLS 协议加密传输。但可通过配置浏览器启动参数，强制 Chrome 输出 SSL 密钥日志，再结合 Wireshark 等工具实现明文还原。此方法绕过浏览器界面限制，适用于需深度解析加密帧结构的场景。
1、关闭所有 Chrome 实例。
2、以命令行方式重新启动 Chrome，并附加参数：--ssl-key-log-file=/path/to/sslkey.log（Windows 示例路径：C:\temp\sslkey.log）。
3、在 Chrome 中访问使用 wss:// 的目标页面并复现 WebSocket 通信。
4、启动 Wireshark，设置捕获过滤器为 tcp.port == 443，捕获 TLS 握手及后续流量。
5、在 Wireshark 的 Preferences → Protocols → TLS 中，将 (Pre)-Master-Secret log filename 指向上述生成的 sslkey.log 文件。
6、应用设置后，Wireshark 将自动解密 TLS 流，并可在 TCP 流追踪中识别 WebSocket 帧格式（含 FIN、Opcode、Mask 等字段）。
四、使用 Console 直接监听 WebSocket 实例
当页面已创建 WebSocket 对象且未被闭包封装时，可通过控制台直接注入事件监听器，实时捕获 onopen、onmessage、onclose 等生命周期事件及其参数。该方法无需刷新页面或依赖 Network 面板，适合快速验证前端逻辑是否正确触发连接与消息处理。
1、确保目标页面已完成 WebSocket 初始化（如执行了 new WebSocket("wss://...")）。
2、在开发者工具的 Console 标签页中输入：var ws = document.querySelector('script').textContent.match(/new WebSocket\(["']([^"']+)["']/)?.[1];（若 WebSocket 实例被赋值给全局变量，如 window.ws，则直接使用该变量名）。
3、执行以下代码绑定监听：ws.onmessage = function(e) { console.log('Received:', e.data); };
4、手动发送测试消息，观察 Console 中输出的原始响应内容。
