Define default width of Chrome DevTools window

问题

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.

回答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.

来源：https://stackoverflow.com/questions/58473161/define-default-width-of-chrome-devtools-window

标签

google-chrome

google-chrome-devtools

Puppeteer