Firefox中如何让JavaScript的Uint8Array在控制台以十六进制显示？

我完全懂你调试WebSocket时的困扰——Firefox默认用十进制显示Uint8Array的字节值，和你手头的十六进制格式规范对不上，每次手动转换太麻烦了。下面分享几个实用的方法帮你直接输出十六进制格式：

方法1：自定义打印函数（最贴合你的需求） #

写一个简单的工具函数，把Uint8Array的每个字节转换成带0x前缀的十六进制字符串，再按照你想要的格式输出：

function logUint8AsHex(uint8Array) {
  // 将每个字节转为两位十六进制字符串，带0x前缀
  const hexElements = Array.from(uint8Array, byte => 
    `0x${byte.toString(16).padStart(2, '0')}`
  );
  // 模拟原生Uint8Array的打印格式
  console.log(`Uint8Array [ ${hexElements.join(', ')} ]`);
}

// 测试使用
const sampleArray = new Uint8Array([131, 165, 116, 111, 112]);
logUint8AsHex(sampleArray);

运行后控制台会输出：Uint8Array [ 0x83, 0xa5, 0x74, 0x6f, 0x70 ]，完美匹配你想要的样式。

方法2：用console.table生成对比表格 #

如果需要同时查看十进制和十六进制的值，方便对照调试，可以用console.table生成结构化表格：

function logUint8Table(uint8Array) {
  const tableData = Array.from(uint8Array, (byte, index) => ({
    索引: index,
    十六进制: `0x${byte.toString(16).padStart(2, '0')}`,
    十进制: byte
  }));
  console.table(tableData);
}

// 使用示例
logUint8Table(sampleArray);

这样会在控制台生成一个清晰的表格，同时展示每个字节的索引、十六进制和十进制值，调试时更直观。

小提示：临时转换单个字节 #

如果只是临时查看某个字节的十六进制值，直接在控制台输入：

sampleArray[0].toString(16) // 输出 "83"，手动加0x即可

需要注意的是，Firefox目前没有内置设置可以修改Uint8Array的默认打印格式，所以自定义工具函数是最稳定的解决方案。你还可以根据需求调整函数，比如把十六进制字母改成大写（只需把toString(16)改成toString(16).toUpperCase()）。

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