如何通过火狐浏览器检查WebSocket长连接的通信数据

浅婷姑娘_8542

浅婷姑娘_8542

2026-11-06

256人浏览

原创

Firefox中需注入JS监听WebSocket收发:①补丁原型捕获new实例的send/onmessage;②重写构造函数拦截动态创建连接;③用网络监视器导出JSON消息。

如何通过火狐浏览器检查websocket长连接的通信数据

要在火狐浏览器中直接查看 WebSocket 长连接的实时通信数据,必须绕过 Network 面板的帧列表限制,用 JavaScript 注入监听逻辑捕获原始 send 和 onmessage 行为——因为 Firefox 控制台默认不打印 WebSocket 消息,只有主动劫持原型方法或重写构造函数,才能让每条收发数据原样输出到控制台。

给 WebSocket 原型打补丁,捕获所有新建实例的收发日志

这一步适用于页面未封装 WebSocket 创建逻辑、且后续连接均由 new WebSocket() 触发的场景。它会修改全局 WebSocket.prototype,对所有新创建的实例生效,但【不会影响已存在且 onmessage 直接赋值为箭头函数或匿名函数的实例】。

在 Firefox 控制台(Ctrl+Shift+K)中粘贴并执行以下代码:

const originalSend = WebSocket.prototype.send;WebSocket.prototype.send = function(data) { console.log('[WS →]', data); return originalSend.apply(this, arguments); };WebSocket.prototype._originalOnMessage = WebSocket.prototype.onmessage;WebSocket.prototype.onmessage = function(event) { console.log('[WS ←]', event.data); if (this._originalOnMessage) this._originalOnMessage.call(this, event); };

刷新页面,触发 WebSocket 重建;或等待服务端推送、手动调用 ws.send(),即可在控制台看到带方向标识的明文日志。

重写 WebSocket 构造函数,捕获动态创建或闭包内的连接

当页面使用 SDK 封装、动态 URL 或 WebSocket 实例被赋值给局部变量时,仅 patch prototype 会漏掉部分连接。此时必须拦截 new WebSocket() 调用本身,确保每个 socket 实例从诞生起就被监听。

方法一:在控制台执行完整重写逻辑

const OriginalWebSocket = window.WebSocket;window.WebSocket = function(url, protocols) { const ws = new OriginalWebSocket(url, protocols); console.log('[WS new]', url); ws.addEventListener('open', () => console.log('[WS open]', url)); ws.addEventListener('message', e => console.log('[WS ←]', e.data)); ws.addEventListener('close', e => console.log('[WS close]', e.code, e.reason)); ws.addEventListener('error', e => console.error('[WS error]', e)); return ws; };

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

方法二:更轻量的事件绑定替代(避免覆盖构造函数)

(function() { const orig = window.WebSocket; window.WebSocket = function(...args) { const ws = new orig(...args); ['open', 'message', 'close', 'error'].forEach(evt => ws.addEventListener(evt, e => console.log(`[WS ${evt}]`, evt === 'message' ? e.data : e))); return ws; }; })();

执行后立即生效,无需刷新;已有连接不受影响,但所有后续 new WebSocket() 都会被捕获。

用网络监视器定位连接并导出帧数据

第一步:打开网络监视器 → Ctrl+Shift+E → 点击顶部“过滤器”漏斗图标 → 勾选“WebSocket”

第二步:在请求列表中找到 ws:// 或 wss:// 开头的条目 → 单击选中 → 切换右侧面板至“消息”标签页

第三步:若消息为空,尝试触发一次发送操作或刷新页面;确认后可右键某帧 → “复制消息内容” → 粘贴至编辑器分析

第四步:如需结构化导出,点击“消息”页右上角三个点 → “导出全部消息为 JSON” → 保存为 .json 文件供离线解析

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Golang WebSocket与实时通信开发
Golang WebSocket与实时通信开发

本专题系统讲解 Golang 在 WebSocket 开发中的应用,涵盖 WebSocket 协议、连接管理、消息推送、心跳机制、群聊功能与广播系统的实现。通过构建实际的聊天应用或实时数据推送系统,帮助开发者掌握 如何使用 Golang 构建高效、可靠的实时通信系统,提高并发处理与系统的可扩展性。

2025.12.22

195

11

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

2026.01.19

436

22

Python WebSocket实时通信与异步服务开发实践
Python WebSocket实时通信与异步服务开发实践

本专题聚焦 Python 在实时通信场景中的开发实践,系统讲解 WebSocket 协议原理、长连接管理、消息推送机制以及异步服务架构设计。内容包括客户端与服务端通信实现、连接稳定性优化、消息队列集成及高并发处理策略。通过完整案例,帮助开发者构建高效稳定的实时通信系统,适用于聊天应用、实时数据推送等场景。

2026.03.18

1375

14

WebSocket 前端开发与实战技巧
WebSocket 前端开发与实战技巧

聚焦 WebSocket 在前端项目中的工程化实践,涵盖原生 JavaScript WebSocket 连接的封装与状态管理、Vue 3 中 WebSocket 的 Composable 封装(useWebSocket)、React 中自定义 Hook 管理连接生命周期、心跳检测(Ping/Pong 定时器)与自动断线重连的实现策略、指数退避重连算法、消息序列化协议(JSON / Protobuf / MessagePack)的选型与性

2026.05.25

468

33

WebSocket发送和接收数据教程合集
WebSocket发送和接收数据教程合集

本专题整合了WebSocket发送与接收数据教程合集,阅读专题下面的文章了解更多详细内容。

2026.05.25

321

20

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

20

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

20

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

20

16

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

2026.11.04

20

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程