Chrome DevTools MCP screenshots: capture, save, and resize images

Chrome DevTools MCP lets an MCP client control a Chrome browser and inspect its pages. Its take_screenshot tool can capture the visible viewport, the full page, or one element. You can return the image to your agent or save it to a file. The official tool reference lists the current arguments.

This tutorial uses the tool names and JSON arguments you give to an MCP client. They are MCP tool calls, not terminal commands. Your client may display them as forms or call them from a prompt.

Connect Chrome DevTools MCP to a browser

Install a current Node.js LTS release and Chrome, then add the server to your MCP client. The project’s setup guide uses npx:

1
{
2
    "mcpServers": {
3
        "chrome-devtools": {
4
            "command": "npx",
5
            "args": [
6
                "-y",
7
                "chrome-devtools-mcp@latest",
8
                "--isolated",
9
                "--filesystem-root=/absolute/path/to/project/screenshots"
10
            ]
11
        }
12
    }
13
}

Create a screenshots directory in your project and replace /absolute/path/to/project/screenshots with its real absolute path. The --filesystem-root option lets the server write files there when your MCP client has not supplied its own filesystem roots. Without an allowed root, file-writing tools may be limited to the operating system’s temporary directory. --isolated gives this session a temporary Chrome profile, useful when you do not want it to share cookies or conflict with another browser session. Both options are described in the server configuration.

The server starts Chrome when a browser tool is first used. Call list_pages with {} to confirm that it can connect. Then open a page:

new_page

1
{"url":"https://screenshotone.com/blog/"}

Call list_pages again and note the new page’s ID. The examples below use pageId: 1; substitute the ID returned in your session. If you need to connect to an already running browser, the advanced usage guide explains --autoConnect and --browser-url. A Chrome instance started for --browser-url needs remote debugging enabled and a separate user data directory.

Capture the viewport or the full page

To save what is currently visible, call take_screenshot:

1
{
2
    "pageId": 1,
3
    "filePath": "/absolute/path/to/project/screenshots/blog-viewport.png"
4
}

filePath saves the image on the machine running the MCP server. If you omit it, the image is attached to the tool response for your agent to inspect. Use an absolute path when you want to know exactly where the file went; a relative path is resolved against the server’s working directory, which may differ from your project directory.

To include content below the fold, call take_screenshot again with fullPage:

1
{
2
    "pageId": 1,
3
    "fullPage": true,
4
    "filePath": "/absolute/path/to/project/screenshots/blog-full-page.png"
5
}

On a long page, the second file will be taller. On a page that fits within the viewport, the two captures may look almost identical. If the page loads content after navigation, wait for a visible phrase with wait_for or take a fresh snapshot before capturing; a full-page option cannot include content the page has not rendered yet.

Capture a single element

First call take_snapshot for the page:

1
{"pageId":1}

The text snapshot gives page elements unique uid values. Find the element you want, copy its current UID, and pass it to take_screenshot:

1
{
2
    "pageId": 1,
3
    "uid": "UID_FROM_LATEST_SNAPSHOT",
4
    "filePath": "/absolute/path/to/project/screenshots/blog-element.png"
5
}

Replace the placeholder with the UID you actually received. Take a new snapshot after navigation or a substantial page change, since the old UID may no longer identify the same element. uid and fullPage: true cannot be used together: one targets an element, while the other targets the entire page.

Choose PNG, JPEG, or WebP

The default format is png. To save a smaller WebP image, set format and quality explicitly:

1
{
2
    "pageId": 1,
3
    "fullPage": true,
4
    "format": "webp",
5
    "quality": 80,
6
    "filePath": "/absolute/path/to/project/screenshots/blog-full-page.webp"
7
}

Use format: "jpeg" with a .jpg or .jpeg filename for JPEG. quality accepts 0–100 for JPEG and WebP; it is ignored for PNG. Keep the filename extension consistent with the requested format. PNG is a useful default for UI details and text. JPEG or WebP can reduce file size when the image will be shared or stored in bulk. Changing quality changes compression, not the pixel width or height.

Set screenshot dimensions and resize large images

take_screenshot does not have per-call width and height arguments. Set the page’s viewport before capturing it. For example, call emulate with a 1280 × 720 CSS-pixel viewport and device pixel ratio of 1:

1
{"pageId":1,"viewport":"1280x720x1"}

Then capture the viewport at that size with take_screenshot:

1
{
2
    "pageId": 1,
3
    "filePath": "/absolute/path/to/project/screenshots/blog-1280x720.png"
4
}

You can also use resize_page to change the page window’s width and height:

1
{"pageId":1,"width":1280,"height":720}

emulate is the clearer choice when the output’s pixel density matters, because its viewport string includes the device pixel ratio. resize_page changes the window size but does not itself specify that ratio. A full-page capture extends to the rendered page dimensions, so it will not have a fixed 1280 × 720 size.

If you only need to keep images returned to the agent from becoming too large, add --screenshot-max-width=1000 and/or --screenshot-max-height=1600 to the server’s args. The server downscales oversized captures while preserving aspect ratio. These limits are different from setting the browser viewport. Check the resulting pixel dimensions, particularly when a high device pixel ratio is in use.

To resize an already saved file, use an image tool after the MCP capture. For example, from your screenshots directory, with ImageMagick installed, this makes a copy that is 1200 pixels wide and preserves its aspect ratio:

1
magick blog-full-page.png -resize 1200 blog-full-page-1200.png

Chrome DevTools MCP does not expose a separate tool for resizing an existing file. Capturing at the desired viewport avoids an extra processing step when you know the target size in advance.

Common screenshot failures

The project’s troubleshooting guide covers Chrome launch errors and remote debugging connection problems in more detail.

Chrome DevTools MCP is useful when an agent must interact with a browser and then capture its current state. If your starting point is a URL and you need a hosted screenshot tool, ScreenshotOne’s MCP server can render the page in its own browser and return a temporary image URL. Download that image if you need to keep it. For more on long-page captures, see our full-page screenshot guide.