如何在火狐浏览器中通过控制台查看WebSocket的实时传输数据？-浏览器-PHP中文网

必须通过 javascript 注入监听逻辑来捕获 websocket 原始数据：1. 打补丁劫持 prototype.send 和 onmessage；2. 重写 websocket 构造函数或用 defineproperty 监听 onmessage 设置；3. 直接访问全局挂载的实例并绑定事件。

如何在火狐浏览器中通过控制台查看websocket的实时传输数据？

要在火狐浏览器中直接通过控制台捕获 WebSocket 实时收发的原始数据，而不是依赖 Network 面板的帧列表，就必须绕过 UI 层、在 JavaScript 运行时注入监听逻辑——因为 Firefox 的 console 本身不自动打印 WebSocket 消息，必须由开发者主动 hook send() 和 onmessage。

给 WebSocket 实例打补丁，让每条消息都输出到控制台

这一步适用于你已知页面创建了 WebSocket 实例（比如全局变量 ws 或通过 const ws = new WebSocket(...) 定义），且能访问其引用。

第一步：在 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 实例的 send 方法和 onmessage 回调，把发送和接收内容原样打印到控制台。注意：它不会影响已存在的、且 onmessage 已被赋值为函数字面量的实例（如 ws.onmessage = e => {...}），只对使用 onmessage 属性赋值或 addEventListener('message') 的实例生效。

第二步：刷新页面，触发 WebSocket 连接重建；或手动调用 ws.send(...)、等待服务端推送，即可在控制台看到带方向标识的实时日志。

监听全局 WebSocket 构造函数，捕获所有新建连接

当页面使用动态创建、变量名不固定、或封装在闭包里的 WebSocket（如某些 SDK 内部实例）时，靠 patch prototype 不够——必须拦截 new WebSocket() 调用本身。

方法一：重写 WebSocket 构造函数

在控制台执行：

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.log('[WS error]', e)); return ws;};

page-agent 浏览器控制（CDP）

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

下载

⚠️ 注意：【此操作会覆盖页面原有 WebSocket 构造函数，若页面依赖 instanceof WebSocket 判断可能出错】。仅用于调试，切勿在生产环境运行。

方法二：用 Object.defineProperty 劫持原型链（更安全）

执行：

Object.defineProperty(WebSocket.prototype, 'onmessage', { set(fn) { console.log('[WS onmessage set]'); this.addEventListener('message', e => console.log('[WS ←]', e.data)); if (typeof fn === 'function') fn.call(this, e); } });

该方式不破坏构造过程，只监听 onmessage 属性赋值行为，兼容性更好，但无法捕获 addEventListener 注册的消息监听器。