Define default width of Chrome DevTools window

Question

Is there a way to give chrome a default width for the devtools window. As it is now, when I start chrome and open DevTools it takes about half the window width. Ideally I wo

Answer 1

Use puppeteer-extra with puppeteer-extra-plugin-user-preferences and specify splitViewState.

package.json dependencies:

"puppeteer": "^1.20.0",
"puppeteer-extra": "^2.1.3",
"puppeteer-extra-plugin-user-data-dir": "^2.1.2",
"puppeteer-extra-plugin-user-preferences": "^2.1.2"

Usage:

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

puppeteer.use(ppUserPrefs({
  userPrefs: {
    devtools: {
      preferences: {
        'InspectorView.splitViewState': JSON.stringify({
          vertical: {size: 300},
          horizontal: {size: 0},
        }),
        uiTheme: '"dark"',
      },
    },
  },
}));

puppeteer.launch({
  headless: false,
  devtools: true,
  defaultViewport: null,
  args: [
    '--window-size=1920,1080',
  ],
});

P.S. to view the full list, copypaste the contents of your Preferences in the browser profile directory and format it with any JSON beautifier, then look up devtools and preferences inside.