能否使用Vanilla JS在开发者工具中解码WebSocket消息？

当然可以用原生JavaScript在开发者工具里解码这类WebSocket消息，但具体解码方式得看消息的实际编码规则——毕竟Uint8Array只是二进制数据容器，背后的格式可能是UTF-8文本、自定义二进制协议或者其他规范。

一、先完善WebSocket消息拦截（发送+接收） #

你的现有代码只拦截了发送的消息，要完整调试双向数据，建议同时拦截接收逻辑：

// 拦截发送的消息
(function(originalSend) {
  WebSocket.prototype.send = function(data) {
    if (data instanceof Uint8Array) {
      console.log("[WebSocket 发送] Uint8Array:", data);
      decodeWebSocketMessage(data);
    }
    return originalSend.apply(this, arguments);
  };
})(WebSocket.prototype.send);

// 拦截接收的消息
(function(originalAddEventListener) {
  WebSocket.prototype.addEventListener = function(type, listener) {
    if (type === 'message') {
      const wrappedListener = function(event) {
        if (event.data instanceof ArrayBuffer) {
          const uint8Data = new Uint8Array(event.data);
          console.log("[WebSocket 接收] Uint8Array:", uint8Data);
          decodeWebSocketMessage(uint8Data);
        }
        listener.apply(this, arguments);
      };
      return originalAddEventListener.call(this, type, wrappedListener);
    }
    return originalAddEventListener.apply(this, arguments);
  };
})(WebSocket.prototype.addEventListener);

二、根据编码规则选择解码方式 #

1. 如果是UTF-8文本编码 #

很多WebSocket消息会把文本转成Uint8Array发送，直接用原生TextDecoder就能解码：

function decodeWebSocketMessage(uint8Data) {
  try {
    const decoder = new TextDecoder('utf-8');
    const text = decoder.decode(uint8Data);
    console.log("[解码结果] UTF-8文本:", text);
  } catch (e) {
    console.log("不是UTF-8编码，尝试其他解码方式");
  }
}

2. 如果是自定义二进制协议 #

如果是业务自定义的二进制格式（比如你的示例数据有固定字节结构），需要先明确协议规则（比如前N个字节是消息类型、数据长度等），再针对性解析。

以你的示例数据为例，假设第一个字节是标识位，第2-3字节是文本内容，解析逻辑如下：

function decodeWebSocketMessage(uint8Data) {
  // 示例解析逻辑（需根据实际协议调整）
  const flag = uint8Data[0]; // 第一个字节为标识位
  // 截取第2、3字节转成文本（65对应'A'，105对应'i'）
  const textPart = new TextDecoder('utf-8').decode(uint8Data.slice(1, 3));
  console.log("[解码结果] 标识位:", flag, "文本片段:", textPart);
  // 剩余字节可根据协议继续解析
}

运行后第一个示例数据会输出：标识位: 0 文本片段: Ai，和数组中的字节对应。

三、注意事项 #

• 解码的核心是明确服务端/客户端的二进制编码规则，如果没有文档，可通过多组消息对比逆向分析。
• 开发者工具中可直接查看Uint8Array内容，也能用Array.from(uint8Data)转成普通数组方便分析。

内容的提问来源于stack exchange，提问作者Qira Quri