如何在JavaScript中获取存储console.log输出值并展示在网页上

算力阿峰

2026-10-2

问题原因

你代码中的第一行console.log('sample output')执行在console.log重写逻辑之前，不会被捕获到日志数组中
重写后的console.log调用时直接传入了logMessages数组的引用，打印时数组还处于写入过程，引用联动会导致你看到递归空数组的表现

可直接运行的实现方案

以下代码可正常捕获所有console.log输出，并自动渲染到网页上：

// 先备份原生console.log，再重写，保证所有后续日志都被捕获
const logBackup = console.log;
const logMessages = [];

console.log = function (...args) {
  // 深拷贝参数存入数组，避免引用类型联动变更
  const clonedArgs = args.map(item => {
    if (typeof item === 'object' && item !== null) {
      try {
        return JSON.parse(JSON.stringify(item))
      } catch(e) {
        return String(item)
      }
    }
    return item
  })
  logMessages.push(clonedArgs);
  // 调用原生log保证控制台正常输出
  logBackup.apply(console, args);
};

// 测试打印
console.log('sample output');
console.log('logged values here', logMessages);

// 日志渲染到网页的方法
function renderLogsToPage() {
  const logContainer = document.createElement('div');
  logContainer.style.padding = '12px';
  logContainer.style.background = '#f5f5f5';
  logContainer.style.margin = '10px 0';
  
  logMessages.forEach((logItem, index) => {
    const logRow = document.createElement('p');
    logRow.style.margin = '4px 0';
    logRow.innerHTML = `<strong>日志${index + 1}:</strong> ${logItem.join(' ')}`
    logContainer.appendChild(logRow)
  })
  
  document.body.appendChild(logContainer)
}

// 页面加载完成后渲染日志
window.addEventListener('load', renderLogsToPage)