如何在浏览器环境中捕获当前运行JavaScript的stdout与stderr？

核心原理 #

浏览器环境没有Node.js风格的标准stdout/stderr流，我们平时在开发者工具看到的控制台输出，本质是console对象内置方法（log/info/warn/error等）的调用结果。所以捕获输出的核心逻辑就是重写console的对应方法，拦截参数后存储到自定义的输出队列中，同时可选择保留原始控制台的输出行为。

基础实现方案 #

适用于简单场景，直接修改全局console对象：

1. 先备份原始console方法，避免永久污染全局环境

// 保存原始console方法备份
const originalConsole = {
  log: console.log,
  info: console.info,
  warn: console.warn,
  error: console.error,
  debug: console.debug
};

2. 定义输出存储队列，重写console方法

const stdout = []; // 标准输出，存log、info类输出
const stderr = []; // 错误输出，存warn、error、异常栈类输出

// 重写标准输出相关方法
console.log = (...args) => {
  // 对参数做序列化处理，避免对象输出为[object Object]
  const outputStr = args.map(arg => {
    if (typeof arg === 'object' && arg !== null) return JSON.stringify(arg, null, 2);
    return String(arg);
  }).join(' ');
  stdout.push(outputStr);
  // 可选：保留原始控制台输出，方便调试
  originalConsole.log.apply(console, args);
};
console.info = console.log;

// 重写错误输出相关方法
console.error = (...args) => {
  const outputStr = args.map(arg => {
    if (arg instanceof Error) return `${arg.name}: ${arg.message}\n${arg.stack}`;
    if (typeof arg === 'object' && arg !== null) return JSON.stringify(arg, null, 2);
    return String(arg);
  }).join(' ');
  stderr.push(outputStr);
  originalConsole.error.apply(console, args);
};
console.warn = console.debug = console.error;

3. 执行完代码后恢复原始console

function restoreConsole() {
  Object.assign(console, originalConsole);
}

沙箱隔离优化方案（推荐用于实时代码编辑器） #

直接修改全局console会影响主页面其他脚本运行，实时代码编辑器场景推荐用隐藏iframe作为沙箱执行用户代码，完全隔离执行环境，避免主页面被篡改：

// 传入用户代码，返回捕获到的输出结果
async function runUserCode(userCode) {
  return new Promise((resolve) => {
    // 创建隐藏iframe沙箱
    const sandboxIframe = document.createElement('iframe');
    sandboxIframe.style.display = 'none';
    document.body.appendChild(sandboxIframe);

    const iframeWindow = sandboxIframe.contentWindow;
    const rawIframeConsole = iframeWindow.console;
    const stdout = [];
    const stderr = [];

    // 重写沙箱内的console方法
    iframeWindow.console.log = (...args) => {
      const output = args.map(a => typeof a === 'object' && a !== null ? JSON.stringify(a, null, 2) : String(a)).join(' ');
      stdout.push(output);
      rawIframeConsole.log.apply(rawIframeConsole, args);
    };
    iframeWindow.console.info = iframeWindow.console.log;

    iframeWindow.console.error = (...args) => {
      const output = args.map(a => {
        if (a instanceof Error) return `${a.name}: ${a.message}\n${a.stack}`;
        return typeof a === 'object' && a !== null ? JSON.stringify(a, null, 2) : String(a);
      }).join(' ');
      stderr.push(output);
      rawIframeConsole.error.apply(rawIframeConsole, args);
    };
    iframeWindow.console.warn = iframeWindow.console.debug = iframeWindow.console.error;

    try {
      // 执行用户代码
      iframeWindow.eval(userCode);
    } catch (e) {
      // 捕获代码执行异常，加入错误输出
      stderr.push(`${e.name}: ${e.message}\n${e.stack}`);
    }

    // 清理沙箱，返回结果
    document.body.removeChild(sandboxIframe);
    resolve({ stdout, stderr });
  });
}

注意事项 #

• 如果需要实现实时输出效果，不需要等代码执行完再返回结果，可以在重写console方法时增加回调函数，每产生一条输出就实时推送到编辑器的输出面板。
• 对于循环引用的对象，直接用JSON.stringify会抛出异常，可以引入专门的JS对象序列化工具处理这类特殊场景。
• 沙箱方案可以额外配置iframe的sandbox属性，进一步限制用户代码的权限，比如禁止跳转、禁止提交表单等，提升编辑器安全性。

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