Skip to content

Bug: --viewport option and resize_page tool fail in headless mode with Browser.setContentsSize error #294

@cycling777

Description

@cycling777

Bug Report: --viewport option and resize_page tool fail in headless mode

Environment

  • chrome-devtools-mcp version: 0.5.1 (latest)
  • Chrome version: 139.0.7258.138
  • OS: Ubuntu 22.04.5 LTS
  • Configuration: --headless=true --isolated=true --viewport=1280x720

Description

The --viewport option causes all MCP tools to fail with a protocol error in headless mode. The resize_page tool also fails with the same error.

Steps to Reproduce

  1. Configure .mcp.json with --viewport=1280x720:
{
  "chrome-devtools": {
    "command": "npx",
    "args": [
      "chrome-devtools-mcp@latest",
      "--channel=stable",
      "--headless=true",
      "--isolated=true",
      "--viewport=1280x720"
    ]
  }
}
  1. Restart MCP server
  2. Try to use any tool (e.g., list_pages, navigate_page, or resize_page)

Expected Behavior

  • --viewport option should set the initial viewport size
  • resize_page tool should resize the page viewport
  • All other tools should work normally

Actual Behavior

All tools fail with the error:

Protocol error (Browser.setContentsSize): 'Browser.setContentsSize' wasn't found

Root Cause Analysis

After investigating the source code, I found:

  1. Both --viewport initialization and resize_page tool use page.resize() (marked as @ts-expect-error internal API for now)
  2. This internal API calls Browser.setContentsSize from Chrome DevTools Protocol
  3. Browser.setContentsSize is marked as Experimental in CDP and appears to be unavailable in headless mode

Source references:

  • src/browser.ts: viewport initialization using page.resize()
  • src/tools/pages.ts: resize_page tool using page.resize()

Suggested Solutions

Option 1: Use Emulation.setDeviceMetricsOverride
This is the standard CDP method for setting viewport size and works in headless mode:

await page._client().send('Emulation.setDeviceMetricsOverride', {
  width: options.viewport.width,
  height: options.viewport.height,
  deviceScaleFactor: 1,
  mobile: false,
});

Option 2: Document the limitation
If switching to Emulation.setDeviceMetricsOverride is not feasible, please:

  • Add a note in the README that --viewport and resize_page don't work in headless mode
  • Provide a workaround or alternative approach

Additional Context

  • Without --viewport, the default viewport is 780x493
  • This makes it difficult to capture screenshots at standard desktop resolutions (1280x720, 1920x1080, etc.)
  • Other headless tools (Puppeteer, Playwright) successfully use Emulation.setDeviceMetricsOverride for viewport control

Related

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions