操纵up:使用“保存日志"启动Chromium.已启用

问题描述

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

如果我不想错过任何东西，目前我的手需要像闪电一样快，以便在调试过程中单击该复选框.我已经在

There is this handy feature in DevTools that you are able to preserve log (so it does not clear the content of the console nor the network tab etc. on page reloads / navigation).

At the moment my hand needs to be as fast as a lightning to click the checkbox during debugging if I don't want to miss a thing. I've already looked for corresponding chrome launch flags on peter.sh without a luck.

Is there a way to launch chromium with this feature enabled? Can it be applied with puppeteer?

My set up is so far:

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

---

Edit

Thanks to the comment of @wOxxOm I was able to enable it, but the solution requires three additional dependencies on the project: puppeteer-extra, puppeteer-extra-plugin-user-preferences and puppeteer-extra-plugin-user-data-dir.

I would be interested in a solution without extra dependencies, exclusively in puppeteer.

user-preferences example:

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

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

解决方案

I've had some success without any extra packages:

1. Launch and close a Browser instance for the sole purpose of generating a new user data directory. Ideally you have provided your own path to it.
2. Locate the Preferences file (it's a JSON file), read it and write to devtools.preferences.
3. Relaunch a Browser (using the user data directory created in step 1)

Here's some code to get you started:

I've used the official puppeteer-core package so that I can use my local installation of Chrome which is why I provided the executablePath option. You don't need this if you use the full puppeteer package.

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();

And here's a screencast:

1. The first launch is the "launch & close" of step 1
2. Then there's the second launch that goes to this question ;) with the DevTools open and the "Preserve log" option checked right from the start.

这篇关于操纵up:使用“保存日志"启动Chromium.已启用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！