Guide · Chrome DevTools MCP · October 29, 2026

Chrome DevTools MCP Screenshots: Full Page, Elements, and Saving Files

Chrome DevTools MCP lets a coding agent drive a real Chrome: open pages, read the console, record performance traces, and take screenshots. The screenshot part is one tool, take_screenshot, but it has a few rules that are easy to trip over: element captures need a snapshot first, full page and element mode do not mix, and images land in the chat unless you give a path. This guide covers what the tool accepts and how to get predictable images out of it.

Looking for the hidden "Capture full size screenshot" command in the DevTools UI instead? That is covered in our Chrome DevTools full-page screenshot guide.

The short answer

Question	Answer
Which tool takes screenshots?	`take_screenshot`. It captures the viewport by default.
Full page?	`fullPage: true`. Not allowed together with `uid`.
One element?	Pass the element's `uid` from `take_snapshot`.
Where is the file?	Without `filePath`, the image is attached to the tool response. With `filePath`, it is saved to disk.
Format?	`png` (default), `jpeg`, or `webp`, with `quality` 0–100 for the last two.

Setup

Chrome DevTools MCP is a local stdio server started with npx. In clients that use an mcpServers config, such as Cursor:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

In Claude Code, add it from the terminal:

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

Flags go after the package name in args. The ones that matter for screenshots:

Flag	Effect
`--headless=true`	No browser window. The default is `false`, so Chrome opens visibly.
`--isolated=true`	Temporary profile, deleted when the browser closes. No leftover cookies between runs.
`--viewport=1280x720`	Initial viewport for the Chrome instances the server starts.
`--browser-url=http://127.0.0.1:9222`	Attach to a Chrome you already started with remote debugging, for example one where you are logged in.
`--slim=true`	Only three tools: navigation, script execution, and screenshots. Smaller tool list in the agent's context.

What take_screenshot accepts

Parameter	What it does
`pageId`	Which open page to capture. Required.
`format`	`png`, `jpeg`, or `webp`. Default `png`.
`quality`	0–100 for JPEG and WebP. Ignored for PNG.
`fullPage`	Capture the whole scrollable page instead of the viewport.
`uid`	Capture one element. The uid comes from the accessibility snapshot.
`filePath`	Absolute path, or relative to the server's working directory. Saves the image instead of attaching it.

For an element capture, the agent first calls take_snapshot, which returns the page's accessibility tree with a uid for each element, then passes that uid to take_screenshot. If you ask for "a screenshot of the pricing table" and the agent skips the snapshot, it has no uid to use and falls back to a page capture.

Where the image goes

Without filePath, the screenshot is returned inside the tool response. The model sees it, but you get no file, and every image adds to the conversation's context. With filePath, the image is written to disk and the response only confirms the path.

Relative paths resolve against the MCP server's working directory, which is not always your project root. Ask for an absolute path, or check where the file landed, when you need the image afterwards.

A prompt that works reliably:

Open https://example.com/pricing with Chrome DevTools MCP, wait until the text "Compare plans" is visible, then take a full-page PNG screenshot and save it to an absolute path inside this project's screenshots/ folder.

Viewport, mobile, and dark mode

Two tools change what the screenshot shows before it is taken:

resize_page sets the page's width and height.
emulate takes a viewport string such as 390x844x3,mobile,touch and a colorScheme of dark, light, or auto. Each call replaces the previous emulation settings, so set viewport and color scheme in the same call.

To wait for content before capturing, wait_for resolves when any of the given texts appears; add visible: true to ignore hidden text.

Gotchas

fullPage and uid conflict. Pick one. To capture a long element, scroll it into view or capture the full page and crop.
A visible Chrome window opens. Headless is off by default. Add --headless=true for background runs and CI.
State leaks between runs. Without --isolated=true, cookies and consent choices persist, so two runs can capture different pages.
Images fill the context. Each attached screenshot is sent to the model. Use filePath when you only need the file, and take_snapshot when the agent only needs to read the page.
Cookie banners and ads are captured as-is. The agent has to click them away first, which costs extra steps.

When a hosted screenshot tool fits better

Chrome DevTools MCP is the right tool when the agent needs a real browser to debug: console errors, network requests, performance traces, or a flow behind your own login. For capturing public pages, a local Chrome is more machinery than the job needs.

The SnapshotFlow MCP server at https://api.snapshotflow.com/mcp renders pages on our servers and returns the image with a download link. Nothing runs on the agent's machine, so it also works for cloud agents that cannot start Chrome.

Job	Chrome DevTools MCP	SnapshotFlow MCP
Debug console, network, performance	Best fit	Not covered
Pages on localhost or behind your login	Yes, it is your browser	Public URLs, or pass HTML directly
Capture many URLs	One page at a time	`batch_screenshot`, up to 10 per call
Before/after comparison	Two images, the model compares	`visual_diff` with a diff image and pixel stats
Cookie banners and ads	Agent clicks them away	`block_cookie_banners`, `block_ads`

Both can be connected at once. Setup guides for Claude Code, Cursor, and other clients are on the SnapshotFlow MCP page.

FAQ

Can Chrome DevTools MCP take a full-page screenshot?

Yes. Call take_screenshot with fullPage: true. It cannot be combined with an element uid.

Why didn't I get a screenshot file?

Without filePath, the image is attached to the tool response for the model, not saved. Ask the agent to pass a filePath.

Can it screenshot a page where I am logged in?

Yes. Start Chrome with remote debugging, log in, and run the server with --browser-url pointing at that Chrome. Keep in mind the agent can then act in that session.

How is it different from Playwright MCP?

Both drive a local browser. Chrome DevTools MCP adds DevTools features such as performance traces and network inspection; Playwright MCP focuses on page automation. See our Playwright MCP screenshot guide for its screenshot tool.

Sources and further reading

ChromeDevTools/chrome-devtools-mcp: README, tool reference, and configuration guide.
Chrome DevTools full-page screenshot for the manual command in the DevTools UI.
agent-browser screenshots for a CLI alternative.

Give your agent screenshots without a local Chrome

Connect the SnapshotFlow MCP server next to Chrome DevTools MCP for batch captures, visual diffs, and clean pages without cookie banners. The free tier gives you 300 screenshots, no credit card required.

Create free account Set up MCP