定义Chrome DevTools窗口的默认宽度 [英] Define default width of Chrome DevTools window

问题描述

有没有一种方法可以为chrome提供devtools窗口的默认宽度.现在，当我启动chrome并打开DevTools时，它需要大约一半的窗口宽度.理想情况下，我会做类似的事情

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

告诉它宽度是什么.

为了提供一些背景信息，我正在运行Puppeteer，以我为例，它会在启动浏览器时打开DevTools.但是它对我来说太宽了，我每次都需要调整它的大小.这是我的配置:

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.

推荐答案

使用 puppeteer-extra 与 puppeteer-extra -plugin-user-preferences 并指定splitViewState.

package.json依赖项:

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"

用法:

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.

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.

这篇关于定义Chrome DevTools窗口的默认宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！