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
- Configure
.mcp.json with --viewport=1280x720:
{
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--channel=stable",
"--headless=true",
"--isolated=true",
"--viewport=1280x720"
]
}
}
- Restart MCP server
- 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:
- Both
--viewport initialization and resize_page tool use page.resize() (marked as @ts-expect-error internal API for now)
- This internal API calls
Browser.setContentsSize from Chrome DevTools Protocol
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
Bug Report:
--viewportoption andresize_pagetool fail in headless modeEnvironment
--headless=true --isolated=true --viewport=1280x720Description
The
--viewportoption causes all MCP tools to fail with a protocol error in headless mode. Theresize_pagetool also fails with the same error.Steps to Reproduce
.mcp.jsonwith--viewport=1280x720:{ "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--channel=stable", "--headless=true", "--isolated=true", "--viewport=1280x720" ] } }list_pages,navigate_page, orresize_page)Expected Behavior
--viewportoption should set the initial viewport sizeresize_pagetool should resize the page viewportActual Behavior
All tools fail with the error:
Root Cause Analysis
After investigating the source code, I found:
--viewportinitialization andresize_pagetool usepage.resize()(marked as@ts-expect-error internal API for now)Browser.setContentsSizefrom Chrome DevTools ProtocolBrowser.setContentsSizeis marked as Experimental in CDP and appears to be unavailable in headless modeSource references:
src/browser.ts: viewport initialization usingpage.resize()src/tools/pages.ts:resize_pagetool usingpage.resize()Suggested Solutions
Option 1: Use
Emulation.setDeviceMetricsOverrideThis is the standard CDP method for setting viewport size and works in headless mode:
Option 2: Document the limitation
If switching to
Emulation.setDeviceMetricsOverrideis not feasible, please:--viewportandresize_pagedon't work in headless modeAdditional Context
--viewport, the default viewport is 780x493Emulation.setDeviceMetricsOverridefor viewport controlRelated
Browser.setContentsSizeis marked as Experimental