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 would do something like

$> /Applications/Google Chrome.app/Contents/MacOS/"Google Chrome" 
      --devtools-width=300

and tell it what the width is.

To give a bit of context, I'm running Puppeteer which, in my case, opens DevTools when it starts the browser. But its too wide for me, I need to resize it everytime. Here is my configuration:

await puppeteer.launch({
        headless: false,
        devtools: true,
        defaultViewport: null,
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        args: [
            '--debug-devtools',
            '--no-sandbox',
            '--disable-setuid-sandbox',
            '--disable-web-security',
            '--allow-running-insecure-content',
            '--disable-notifications',
            '--window-size=1920,1080'
        ]
    });

But I think this is not a puppeteer question.

user_3959875 · Answer

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.

Define default width of Chrome DevTools window

1 Answers