Puppeteer: Launch Chromium with "Preserve log" enabled

user_12412595 0
Viewed 1494

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).

enter image description here

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"'
        }
      }
    }
  })
)
puppeteer google-chrome-devtools chromium
1 Answers

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.

enter image description here

user_12448840
Related