如何将控制台console的全部内容输出显示到div元素中

通过劫持原生console的输出方法，在不影响控制台原有输出的前提下，把所有打印内容同步追加到指定DIV元素中，即可完整捕获所有console输出满足调试需求。

完整实现代码 #

HTML部分 #

<!-- 用于展示控制台内容的容器 -->
<div id="console-output" style="border:1px solid #eee; padding:10px; height: 400px; overflow-y: auto; background: #f9f9f9;"></div>

JavaScript部分 #

// 保存原生console方法，保证原有控制台输出不受影响
const originalConsole = {
  log: console.log,
  info: console.info,
  warn: console.warn,
  error: console.error
};
// 获取日志容器
const consoleContainer = document.getElementById('console-output');

// 重写console方法逻辑
function rewriteConsole(type) {
  console[type] = function(...args) {
    // 先调用原生方法，保证控制台正常输出
    originalConsole[type].apply(console, args);
    
    // 把参数转成可读字符串，支持对象类型打印
    const content = args.map(arg => {
      if (typeof arg === 'object') {
        return JSON.stringify(arg, null, 2);
      }
      return String(arg);
    }).join(' ');
    
    // 创建日志条目元素，不同级别日志对应不同样式
    const logItem = document.createElement('div');
    logItem.style.margin = '4px 0';
    logItem.style.padding = '2px 4px';
    switch(type) {
      case 'warn':
        logItem.style.color = '#9c7c00';
        logItem.style.background = '#fff9e6';
        break;
      case 'error':
        logItem.style.color = '#d93025';
        logItem.style.background = '#ffebee';
        break;
      case 'info':
        logItem.style.color = '#1967d2';
        logItem.style.background = '#e8f0fe';
        break;
      default:
        logItem.style.color = '#202124';
    }
    logItem.textContent = `[${new Date().toLocaleTimeString()}] [${type.toUpperCase()}] ${content}`;
    // 追加到容器且自动滚动到底部
    consoleContainer.appendChild(logItem);
    consoleContainer.scrollTop = consoleContainer.scrollHeight;
  }
}

// 对所有需要捕获的console方法执行重写
['log', 'info', 'warn', 'error'].forEach(type => rewriteConsole(type));

注意事项 #

• 该方案会捕获重写之后产生的所有console输出，如果需要捕获页面加载初期的输出，可以把这段JS放在页面最顶部的<head>标签内执行
• 如果需要清空DIV内的日志，可直接调用consoleContainer.innerHTML = ''实现
• 对于console.table、console.time这类特殊方法，按照上述逻辑自行扩展重写对应方法即可适配

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