能否在浏览器控制台中通过多个console.log实现单行输出所有日志？

原生console.log()每次调用默认会在浏览器控制台单独占一行输出，没有原生配置可以直接修改换行逻辑，但可以通过以下几种技巧实现多个日志的单行合并展示：

方案1：缓存内容后统一输出 #

这是最通用、无侵入的方案，适合可以调整日志调用逻辑的场景：

• 提前声明一个变量作为日志缓存容器，每次需要输出日志时先将内容追加到缓存中
• 所有日志追加完成后，仅调用一次console.log()输出完整的缓存内容

代码示例：

// 初始化日志缓存
let logCache = '';

// 多次追加日志内容，不会触发控制台输出
logCache += '用户登录成功 ';
logCache += '用户ID:12345 ';
logCache += '登录时间:2024-05-20';

// 最终统一输出，所有内容展示为一行
console.log(logCache);

方案2：重写console.log实现无感知合并 #

如果不想修改原有业务代码中的console.log调用，可以通过重写日志方法实现自动合并：

• 先保存原生console.log的引用，再自定义新的log方法实现内容缓存
• 需要输出时恢复原生方法，打印合并后的完整日志

代码示例：

// 保存原生log方法
const originalLog = console.log;
let mergedContent = '';

// 重写log方法，所有调用都会把内容拼接到缓存中
console.log = (...args) => {
  mergedContent += args.join(' ') + ' ';
};

// 原有业务代码的log调用，不会单独换行输出
console.log('请求发起');
console.log('接口响应成功');
console.log('耗时120ms');

// 恢复原生log方法，输出合并后的内容
console.log = originalLog;
console.log(mergedContent);

拓展：带样式的多行内容合并 #

如果需要把不同样式的日志合并到同一行，可以在同一次console.log调用中使用多个%c占位符实现：

// 不同样式的内容合并为单行
console.log(
  '%c成功%c 请求路径:/api/user %c 耗时:120ms',
  'color: green; font-weight: bold;',
  'color: #333;',
  'color: #999;'
);

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