Puppeteer启动DevTools如何默认打开Console标签并启用Preserve log

以下方案在Linux/Mac环境下Puppeteer v19+、Chromium 100+版本验证可用：

• 问题1：dumpio: true 无法在终端输出页面console.log内容
  dumpio参数的实际作用是将Chromium浏览器进程自身的stdout、stderr输出转发到当前终端，不会自动捕获页面沙箱上下文内的console输出。要实现终端打印页面日志，需要手动监听page实例的console事件，参考代码：

const page = await browser.newPage();
// 监听页面所有级别console输出
page.on('console', msg => {
  const logLevel = msg.type();
  const logContent = msg.args().map(arg => arg.toString()).join(' ');
  // 对应不同日志级别用终端不同方法打印，错误走stderr，普通日志走stdout
  if (logLevel === 'error' || logLevel === 'warning') {
    console.error(`[Page ${logLevel}]`, logContent);
  } else {
    console.log(`[Page ${logLevel}]`, logContent);
  }
});
// 可选：同时捕获页面未捕获的运行时错误
page.on('pageerror', err => {
  console.error('[Page Uncaught Runtime Error]', err.stack || err.message);
});

如果需要同时查看浏览器底层的进程日志（比如扩展加载错误、GPU进程报错等），保留原有dumpio: true配置即可，两者不冲突。

• 问题2：DevTools唤起后默认选中Console标签页
  Puppeteer原生没有提供指定DevTools默认面板的配置项，可以通过Chrome DevTools Protocol（CDP）发送指令实现，在页面初始化完成、调用page.goto()前执行以下代码：

// 为当前页面创建CDP会话
const cdpSession = await page.target().createCDPSession();
// 发送指令切换DevTools默认面板到Console
await cdpSession.send('DevTools.setCurrentPanel', { panel: 'console' });

• 问题3：默认开启DevTools的Preserve log功能
  Preserve log包含跨导航保留控制台日志、保留网络请求记录两个核心能力，有两种稳定实现方式，优先选第一种无副作用的CDP方案：

1. 通过CDP直接开启对应配置，和上面的面板切换代码放在一起即可：

// 开启控制台日志跨导航保留
await cdpSession.send('Console.enable');
await cdpSession.send('Log.enable');
// 开启网络请求记录跨导航保留，设置足够的日志缓冲区大小
await cdpSession.send('Network.enable', {
  maxTotalBufferSize: 1024 * 1024 * 100,
  maxResourceBufferSize: 1024 * 1024 * 10
});

2. 如果当前Chromium版本不支持上述CDP指令，可以通过监听DevTools自身的页面对象，直接修改DevTools的本地配置实现：

// 等待DevTools页面加载完成
browser.waitForTarget(
  target => target.type() === 'other' && target.url().startsWith('devtools://')
).then(async devtoolsTarget => {
  const devtoolsPage = await devtoolsTarget.page();
  await devtoolsPage.evaluate(() => {
    const devtoolsPrefs = JSON.parse(
      localStorage.getItem('devtools-preferences') || '{}'
    );
    // 开启控制台日志保留
    devtoolsPrefs.preserveConsoleLog = 'true';
    // 开启网络日志保留
    devtoolsPrefs['network_log.preserve-log'] = 'true';
    localStorage.setItem('devtools-preferences', JSON.stringify(devtoolsPrefs));
  });
});

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