# Chrome DevTools MCP

> Let the agent open the page and read what actually rendered

Category: MCP servers (https://aiarabicdev.com/mcp-servers)
Canonical page: https://aiarabicdev.com/mcp-servers/chrome-devtools-mcp
Tags: mcp, browser, chrome, debugging, frontend

Chrome DevTools MCP gives an agent a real Chrome instance: navigate, screenshot, click, evaluate scripts, read the console and inspect network requests. It closes the loop between writing frontend code and knowing whether it worked.

## Facts

- Licence: Apache-2.0
- Language: TypeScript
- Cost: Free and open source
- Self hostable: yes
- Added: 2026-08-23
- Last checked: 2026-08-23

## Links

- Source: https://github.com/ChromeDevTools/chrome-devtools-mcp

## Why this is the highest value server for frontend work

Without a browser, an agent writing UI is guessing. It cannot see that a heading wrapped, that a request returned 500, or that a component threw during hydration. With a browser it reads the console, takes a screenshot and fixes the actual problem.

Performance traces and Lighthouse audits are also exposed, which turns vague instructions about making a page fast into a measurement the agent can act on.

## How to use it without wasting tokens

Screenshots are expensive in context. Ask for one at a decision point, not after every edit, and prefer reading the console or a specific element's computed style when that answers the question.

It drives a real browser, so it can log into things and submit forms. Point it at local development, and be deliberate before pointing it at anything authenticated or public.

## Reach for it when

- the agent writes frontend code and needs to see the result
- debugging a hydration or console error you cannot reproduce by reading
- measuring performance rather than guessing at it

## Watch out for

- screenshots consume a lot of context, so ask for them at decision points only
- it drives a real browser that can log in and submit forms, so scope what it may reach
- a visible Chrome window competes with your own browsing session

## Get started

Add to Claude Code:

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

---

aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements.
New entries are announced at https://t.me/arabic_Intelligence