Puppeteer：启用 "Preserve log" 启动 Chromium

Question

DevTools 中有一个方便的功能，您可以保留日志（因此它不会清除控制台的内容，也不会在页面重新加载时清除网络选项卡等/导航）。

目前，如果我不想错过任何东西，我的手需要像闪电一样快才能在调试过程中单击复选框。我已经在 peter.sh 上寻找相应的 chrome 启动标志，但没有成功。

有没有办法在启用此功能的情况下启动 Chromium？可以和puppeteer一起使用吗？

到目前为止我的设置是：

const browser = await puppeteer.launch({ headless: false, devtools: true })

---

编辑

感谢@wOxxOm 的评论，我能够启用它，但解决方案需要对项目的三个额外依赖项：puppeteer-extra、puppeteer-extra-plugin-user-preferences 和 puppeteer-extra-plugin-user-data-dir。

我会对没有额外依赖的解决方案感兴趣，只在 puppeteer 中。

user-preferences 例子：

const puppeteer = require('puppeteer-extra')
const ppUserPrefs = require('puppeteer-extra-plugin-user-preferences')

puppeteer.use(
  ppUserPrefs({
    userPrefs: {
      devtools: {
        preferences: {
          'network_log.preserve-log': '"true"'
        }
      }
    }
  })
)

Answer 1

我在没有任何额外软件包的情况下取得了一些成功：

1. 启动和关闭浏览器实例的唯一目的是生成新的用户数据目录。理想情况下，您已经提供了自己的路径。
2. 找到 Preferences 文件（这是一个 JSON 文件），读取并写入 devtools.preferences.
3. 重新启动浏览器（使用在步骤 1 中创建的用户数据目录）

这里有一些代码可以帮助您入门：

我使用了官方的 puppeteer-core 包，这样我就可以使用本地安装的 Chrome，这就是我提供 executablePath 选项的原因。如果您使用完整的 puppeteer 包，则不需要这个。

const pp = require('puppeteer-core');
const fs = require("fs");

const run = async () => {
  const opts = { executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
               , devtools: true
               , userDataDir: "/tmp/pp-udd"
               , args: ["--auto-open-devtools-for-tabs"]
               };

  // open & close to create the user data directory
  let browser = await pp.launch(opts);
  await browser.close();

  // read & write Preferences
  const prefs = JSON.parse(fs.readFileSync("/tmp/pp-udd/Default/Preferences"));
  prefs.devtools.preferences['network_log.preserve-log'] = '"true"';
  fs.writeFileSync("/tmp/pp-udd/Default/Preferences", JSON.stringify(prefs));

  // relaunch with our own Preferences from our own user data directory
  browser = await pp.launch(opts);
  let page = await browser.newPage();
  await page.goto("
};

run();

这是一个截屏视频：

1. 第一次启动是第 1 步的“启动&关闭”
2. 然后是针对此问题的第二次发布 ;) 打开 DevTools 并从一开始就选中“保留日志”选项。