定义 Chrome DevTools window 的默认宽度

Question

有没有办法给 chrome devtools window 一个默认宽度。就像现在一样，当我启动 chrome 并打开 DevTools 时，它占用的宽度大约是 window 的一半。理想情况下我会做类似

的事情

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

并告诉它宽度是多少。

为了提供一些上下文，我是运行 Puppeteer，就我而言，它会在启动浏览器时打开 DevTools。但是它对我来说太宽了，我每次都需要调整它的大小。这是我的配置：

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'
        ]
    });

但我认为这不是木偶问题。

Answer 1

使用puppeteer-extra with puppeteer-extra-plugin-user-preferences并指定splitViewState。

package.json 依赖关系：

"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"

用法：

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。要查看完整列表，请将 Preferences 的内容复制粘贴到浏览器配置文件目录中，并使用任何 JSON 美化器对其进行格式化，然后在其中查找 devtools 和 preferences。

定义 Chrome DevTools window 的默认宽度

Define default width of Chrome DevTools window

google-chrome

google-chrome-devtools

puppeteer