Puppeteer非无头模式下窗口右侧空白问题的原因与解决方法

• 这类右侧闲置空白本质是Chrome启动时读取了本地缓存的DevTools布局配置：哪怕完全没有打开开发者工具，只要缓存里记录了“DevTools停靠在右侧”的历史状态，Chrome就会主动从网页渲染区域扣除之前记住的DevTools占宽，最终形成窗口满边、渲染区域空一块的无效UI空间
• 叠加--start-maximized参数的行为特性：这个参数只会把Chrome窗口撑满系统可用工作区，不会主动修正网页渲染视口的实际尺寸，相当于窗口已经顶到屏幕边缘，渲染区域却默认预留了一块给不存在的DevTools
• 常见触发场景：很多人之前手动在Puppeteer启动的Chrome窗口里开过一次DevTools并停靠在右侧，这个布局配置就被永久存在对应的用户数据缓存里，后续每次启动都会触发这个预留逻辑

• 方案1：启动时强制禁用DevTools布局预占，在启动参数中加入--disable-features=DevToolsDockSide，完整启动配置示例：

const browser = await launch({
  headless: false,
  args: [
    "--start-maximized",
    "--disable-features=DevToolsDockSide"
  ]
})

• 方案2：显式绑定实际窗口尺寸到网页视口，避免Chrome按缓存值自动扣减渲染宽度。需要注意：Puppeteer默认新建页面时会套用800x600的固定默认视口，哪怕窗口尺寸拉满，如果不手动同步，也会出现渲染区域错位的问题，实现代码如下：

// 新建页面后，同步实际窗口的边界尺寸到视口
const page = await browser.newPage();
// 获取当前浏览器的窗口列表，拿到第一个窗口的边界尺寸
const windows = await browser.browserWindows();
const windowBounds = await browser.windowBounds(windows[0].id);
await page.setViewport({
  width: windowBounds.width,
  height: windowBounds.height
})

• 方案3：如果上述方案无效，说明固定用户数据目录里存储了残留的DevTools布局缓存，直接在启动参数里加--reset-devtools-layout，让Chrome启动时重置所有DevTools相关的布局缓存即可。

注意：不要额外添加--auto-open-devtools-for-tabs这类参数，会反过来强制让DevTools占走右侧空间，加重这类错位问题。

内容的提问来源于stack exchange，提问作者Eugene Loy