### 在火狐浏览器控制台中捕获 WebSocket 实时数据，其实没那么复杂 直接通过浏览器控制台打印 WebSocket 的收发内容，光靠 Network 面板的帧列表往往不够直观——那些数据经过了 UI 层渲染，无法原样看到原始二进制或文本内容。 真正高效的做法是**绕过 UI**，在 JavaScript 运行时注入监听逻辑。因为 Firefox 默认不会自动打印 WebSocket 消息，必须由开发者主动 hook `send()` 和 `onmessage`。 下面给出三种实用方法，每一条都经过实际验证。

---

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

这个方案的前提是，你清楚页面上创建了 WebSocket 实例（比如全局变量 `ws`，或者通过 `const ws = new WebSocket(...)` 定义），并且能直接拿到这个引用。 在 Firefox 控制台（Ctrl+Shift+K）粘贴以下代码： ```javascript 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 => {...}`）无效——因为 `prototype.onmessage` 已经被实例属性覆盖了。 但只要实例是通过 `onmessage` 属性赋值或者 `addEventListener('message')` 注册的，都能被捕获。 刷新页面触发 WebSocket 连接重建，或者手动调用 `ws.send(...)`、等待服务端推送，就能在控制台看到带方向标识的实时日志。 ---

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

如果页面使用了动态创建、变量名不固定、或者封装在闭包里的 WebSocket（比如某些 SDK 内部实例），光 patch prototype 还不够——你得拦截 `new WebSocket()` 这个调用本身。

方法一：重写 WebSocket 构造函数

在控制台执行： ```javascript 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; }; ``` 注意：这个操作会覆盖页面原有的 `WebSocket` 构造函数。如果页面代码依赖 `instanceof WebSocket` 做类型判断，可能会出错。它只适合调试场景，千万别在生产环境运行。

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

执行： ```javascript 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` 注册的消息监听器——因为那个不走 setter。 ---

从控制台直接读取当前活跃的 WebSocket 实例

如果页面把 WebSocket 实例挂载到了全局对象上（比如 `window.ws`、`window.socket`、`window.connection`），那就更简单了——直接在控制台访问并绑定监听。 输入 `window.ws?.addEventListener('message', e => console.log('[live WS ←]', e.data))` 并回车。 如果返回 `undefined`，说明 `window.ws` 不存在或未定义。可以尝试 `console.dir(window)` 展开全局对象，搜索关键词 `websocket`、`ws`、`socket` 等属性名。 找到之后，用 `ws.onmessage = e => console.log(e.data)` 覆盖原有回调，立即生效。 这一步操作起来很简单，直接把文件拖进去就行。