8

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"'
        }
      }
    }
  })
)
theDavidBarton
  • 7,643
  • 4
  • 24
  • 51
  • Try using [Define default width of Chrome DevTools window](https://stackoverflow.com/a/58473581) with `preserveConsoleLog: '"true"'`. – wOxxOm Aug 31 '20 at 04:54
  • It seems to be a good approach, but can you confirm @wOxxOm that `preserveConsoleLog` is still an available option and not deprecated? It doesn't set the feature with the [user-preferences](https://github.com/berstend/puppeteer-extra/tree/master/packages/puppeteer-extra-plugin-user-preferences) plugin and I haven't found it neither in the available pref names looking back in git for 2 years: https://chromium.googlesource.com/chromium/src/+/master/chrome/common/pref_names.cc. What am I doing wrong? – theDavidBarton Sep 02 '20 at 18:05
  • 1
    Devtools prefs are in different source file but it's much simpler to just read the `Preferences` file in the profile directory. Make sure you've used nested quotes as shown. – wOxxOm Sep 02 '20 at 18:21
  • Thanks, actually it was `'network_log.preserve-log': '"true"'` that needed. I will see if there is any alternative solution with less additional dependencies (if possible I would avoid to add puppeteer-extra and two of its plugins to set this checkbox. But I admit the user-preferences is a correct way to do it. – theDavidBarton Sep 02 '20 at 18:48

1 Answers1

5

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

customcommander
  • 17,580
  • 5
  • 58
  • 84