How to Capture Screenshots with Chrome DevTools MCP

Use Chrome DevTools MCP’s take_screenshot tool to capture the current viewport, a full page, or one element in a live Chrome session. The tool requires the target pageId. Omit uid and fullPage for the viewport, set fullPage: true for the full page, or pass a current snapshot’s element uid for an element capture. Set filePath to save the image; otherwise it is attached to the tool response.

1. Install and connect Chrome DevTools MCP

Chrome DevTools MCP is an open-source MCP server for controlling and inspecting a live Chrome browser. It supports Google Chrome and Chrome for Testing. Other Chromium browsers may work, but are not guaranteed. The documented prerequisites are Node.js LTS, npm, and current stable Chrome.

Install Node.js LTS and npm, and make sure Chrome or Chrome for Testing is available.
Follow the official Chrome DevTools for agents setup guide for your MCP client. Setup steps and config locations vary by client.
For compatible MCP clients, the general server launch configuration uses npx -y chrome-devtools-mcp@latest. Use the current project setup instructions for the client-specific configuration.
Start the MCP client and connect it to the intended Chrome session.

The server can launch its own browser or connect to an already-running debuggable Chrome instance. Optional configuration includes --browser-url for a debugging endpoint, a WebSocket endpoint, headless mode, and isolated temporary browser profiles. See the project’s configuration reference for current flags and details.

2. Select the page and capture it

Screenshot capture is page-scoped. First open or select the target page through the MCP server and use the pageId for that page. Page IDs belong to the current browser session; do not copy an example ID and assume it will work in another session.

Capture the visible viewport

Call take_screenshot with the target pageId. Omit uid and leave fullPage unset or false. This captures the visible browser page.

Capture the full page

Set fullPage to true. Full-page mode cannot be combined with uid.

{
  "pageId": 1,
  "filePath": "screenshots/page.webp",
  "format": "webp",
  "quality": 85,
  "fullPage": true
}

This is an illustrative MCP tool call: replace the page ID with the ID from your active session. The fields follow the official tool reference.

Capture one element

Take a fresh page snapshot, find the target element’s current uid, then pass that UID to take_screenshot. UIDs are tied to the page snapshot, and can become stale when the page changes. Take another snapshot if content or identifiers have changed.

{
  "pageId": 1,
  "uid": "<uid from the latest page snapshot>",
  "format": "png",
  "filePath": "screenshots/element.png"
}

Replace both the illustrative page ID and UID with values from the current session. Do not set fullPage: true for this element capture.

3. Choose format, quality, and file output

Setting	Behavior	When to use it
`format`	`png`, `jpeg`, or `webp`; PNG is the default.	PNG preserves crisp UI text well. JPEG or WebP can reduce output size when some compression is acceptable.
`quality`	Integer from 0 to 100 for JPEG and WebP. Ignored for PNG.	Adjust compressed image quality against file size. The docs do not define one best value for every page.
`filePath`	Saves the screenshot at the requested path. Without it, the screenshot is attached to the tool response.	Use a path the MCP server is allowed to write.
`--screenshotMaxWidth` and `--screenshotMaxHeight`	Downscale larger screenshots while preserving aspect ratio.	Limit dimensions and image context sent to an agent.

The project configuration documentation says JPEG and WebP files are roughly 3–5 times smaller than PNG; this is a documented estimate, not a guarantee for a particular page. Prefer PNG when fine text or lossless-style output matters. Consider JPEG or WebP for smaller transfers or less image context. See the configuration reference for size limits and current options.

4. Automate capture from a coding agent

Once the MCP server is connected, ask your MCP client to select the intended browser page, then call its take_screenshot tool with the relevant arguments. For example, specify the page ID, request fullPage: true when the entire document is needed, choose a format, and provide a writable filePath if the image should be saved. For element screenshots, have the client take a current snapshot and use the selected element’s UID. Exact interaction steps depend on the MCP client.

The MCP tool is not a REST endpoint: its arguments are sent through the connected MCP client and server. A cURL, Python, or Node.js HTTP call cannot invoke this MCP tool directly. Those languages can instead request a screenshot from a screenshot API.

5. Privacy, reliability, and cost considerations

Browser access and privacy

The Chrome DevTools MCP project warns that the server exposes browser content to connected MCP clients, which may inspect, debug, and modify browser data. An agent connected to an authenticated session may act on the user’s behalf. Use a browser session appropriate for the task, and avoid exposing sensitive pages or personal data unnecessarily. Read the project’s security and usage notes before connecting a session with valuable account access.

File access

Saving with filePath is subject to the server’s filesystem access configuration. When the client does not negotiate filesystem roots, file-writing tools are restricted by default to the operating system’s temporary directory. If a path fails, check the configured roots and use a permitted destination rather than assuming the MCP server can write anywhere.

Telemetry

Usage-statistics collection is enabled by default according to the project README. It can be disabled with --no-usage-statistics. The configuration documentation also describes CI and an environment variable as conditions that disable collection. Check the current project docs for exact behavior.

Performance and reliability

Large full-page images take more storage and more image context to return or inspect. Use screenshot dimension limits or a compressed format when full resolution is unnecessary.
Choose PNG for sharp text and interface detail; JPEG or WebP with a suitable quality setting can reduce transfer size.
Use a current page ID and, for element captures, a fresh snapshot UID. Stale identifiers are a common source of failures.
The capture depends on the state of the connected browser and target page. Confirm the correct page is open and loaded before asking the agent to capture it.

Chrome DevTools MCP is open-source software; the cited setup and tool documentation does not establish a per-screenshot service price. Account for the Chrome environment and the compute and storage used by your own setup.

6. Troubleshooting

Symptom	Likely cause	Fix
The tool cannot find the page or capture fails for the wrong tab.	The `pageId` is missing, stale, or belongs to another session or page.	List or select the open target page again and use its current page ID.
An element screenshot fails or captures the wrong element.	The UID came from an old snapshot or another page.	Take a fresh snapshot of the target page and use the target element’s current UID.
The tool rejects a request that includes both `uid` and `fullPage`.	Full-page capture and element capture are incompatible modes.	Choose one: remove `uid` for full-page capture, or remove `fullPage` and provide the UID for an element.
The screenshot is returned but no file appears.	`filePath` was omitted, or the path is outside permitted filesystem roots.	Set a destination path and check the server’s negotiated roots or temporary-directory restriction.
Output looks unexpectedly large.	PNG is the default, or the page dimensions are large.	Use JPEG/WebP with a quality value, or set maximum screenshot width and height.
Text or fine details look compressed.	JPEG/WebP compression is reducing detail.	Use PNG, or raise the quality value for JPEG/WebP.
The MCP server does not start.	Node.js/npm is unavailable, Chrome cannot be found, or client configuration differs from the example.	Check the documented prerequisites, then follow the setup instructions for the specific MCP client and current server version.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API returns a screenshot or PDF. This cURL request saves a WebP screenshot:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Equivalent Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Equivalent Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

See the ScreenshotNeo API documentation for request options and MCP setup. Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

8. FAQ

Can Chrome DevTools MCP capture a PDF?

This guide covers the project’s take_screenshot image tool. Check the current tool reference for available PDF or print-to-PDF workflows; do not treat screenshot output as a PDF.

Can I use an arbitrary CSS selector instead of a UID?

The documented screenshot action identifies an element using its snapshot UID. Take a current page snapshot to obtain that UID.

Does a screenshot change the page?

Capturing is a read-oriented action, but the connected agent can also inspect, debug, and modify browser data. Keep the connected session’s permissions and contents in mind.