如何让Firefox控制台同Chrome一样用%o、%O差异化输出DOM节点

首先明确 Chrome 下两个格式化符的标准行为作为对照：

// 输出可展开交互的DOM节点视图
console.log('%o', document.body.firstElementChild);
// 输出DOM节点的完整对象属性列表，等价于 console.dir(document.body.firstElementChild)
console.log('%O', document.body.firstElementChild); 

方案1：高版本Firefox原生配置开启（无需改代码） #

• 打开 Firefox，地址栏输入 about:config 进入高级配置页，确认风险提示进入配置列表
• 搜索配置项 devtools.console.new-console-frontend，确认值为 true（Firefox 110 及以上版本默认已开启）
• 搜索配置项 devtools.console.formatters.O-for-objects，双击将值修改为 true
• 关闭再重新打开开发者工具控制台即可生效，此时 %o、%O 的行为和 Chrome 完全一致

方案2：全版本兼容的代码封装（无需改浏览器配置） #

如果需要适配低版本 Firefox，或者不想让用户手动修改浏览器配置，可以在项目入口处引入以下代码，重写 console.log 逻辑实现兼容：

// 缓存原生console方法
const rawLog = console.log;
const rawDir = console.dir;

console.log = function (...args) {
  // 无格式化字符串时直接走原生逻辑
  if (typeof args[0] !== 'string') {
    return rawLog.apply(console, args);
  }

  const formatStr = args[0];
  let paramIdx = 1;
  // 处理%o和%O占位符
  const newFormatStr = formatStr.replace(/%([oO])/g, (match, flag) => {
    const target = args[paramIdx++];
    // 非DOM节点不处理，保留原逻辑
    if (!(target instanceof Node)) return match;
    // %O对应输出属性对象，调用console.dir
    if (flag === 'O') {
      rawDir.call(console, target);
      // 移除当前占位符，避免重复输出
      return '';
    }
    // %o保留原DOM节点输出逻辑
    return '%o';
  });

  // 拼接处理后的参数调用原生方法
  return rawLog.apply(console, [newFormatStr, ...args.slice(paramIdx)]);
};

引入后原有打印代码不需要做任何修改，即可在全版本 Firefox 中实现和 Chrome 一致的输出效果。

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