木偶：启动启用了“保留日志”功能的Chromium

编程问答 2022-08-13

问题描述

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

enter image description here

如果我不想错过任何东西，目前我的手需要像闪电一样快，以便在调试期间单击复选框。我已经在peter.sh上寻找了相应的Chrome启动标志，但没有运气。

是否可以通过启用此功能来启动铬？可以与木偶一起使用吗？

到目前为止，我的设置是

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"'
        }
      }
    }
  })
)

解决方法

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

  1. 仅出于生成新用户数据目录的目的启动并关闭Browser实例。理想情况下，您已经提供了自己的途径。
  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("https://stackoverflow.com/q/63661366/1244884");
};

run();

这是一个电视广播：

  1. 第一次启动是步骤1的“启动和关闭”
  2. 然后是第二个问题；）打开DevTools并从一开始就选中了“保留日志”选项。

enter image description here