Related article:
Setup
The Chrome DevTool MCP server is now available in the stable channel (Chrome v146). You can enable it by following these steps.
1) Go to:
chrome://inspect/#remote-debugging2) Click "Allow remote debugging for this browser instance".
Connects with Gemini CLI
1) Follow the steps here.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--autoConnect"
]
}
}
}Connects with Claude CLI
1) Run the following command. (Adjust the scope as needed)
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --autoConnect 2) Ask Claude to test the access.
⏺ chrome-devtools - list_pages (MCP)
⎿ ## Pages
1: https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session [selected]
2: https://code.claude.com/docs/en/mcp
3: chrome://inspect/#remote-debugging
⏺ The MCP server is working. I can see 3 open tabs in your Chrome browser:
1. Chrome DevTools MCP blog post (currently selected)
2. Claude Code MCP docs
3. Chrome remote debugging inspector
The connection is live and ready to use. I can interact with your browser — take screenshots, navigate pages, click elements, run JavaScript, etc.
Testing
1) Telling Claude:
If you look at the screen, there is so much more space on the right that we can occupy
2) Claude takes a screenshot.
⏺ chrome-devtools - take_screenshot (MCP)
⎿ Took a screenshot of the current page's viewport.
⎿ [Image]
⏺ I can see the "New Tag" form is narrow and centered, leaving a lot of unused space. Let me look at the form template to widen it.
⏺ Read 2 files (ctrl+o to expand)
⏺ The form card has max-w-xl which caps it at 576px. I'll widen it to use more of the available space. 3) Claude reloads the page and applies additional fixes.
⏺ chrome-devtools - take_screenshot (MCP)
⎿ Took a screenshot of the current page's viewport.
⎿ [Image]
⏺ Looks like it might be cached. Let me reload the page.
⏺ chrome-devtools - navigate_page (MCP)(url: "reload")
⎿ Unable to navigate in the selected page: Protocol error (Page.navigate): Cannot navigate to invalid URL.
## Pages
1: http://localhost:3007/tags/new [selected]
⏺ chrome-devtools - navigate_page (MCP)(url: "http://localhost:3007/tags/new")
⎿ Successfully navigated to http://localhost:3007/tags/new.
## Pages
1: http://localhost:3007/tags/new [selected]
⏺ chrome-devtools - take_screenshot (MCP)
⎿ Took a screenshot of the current page's viewport.
⎿ [Image]
⏺ The card is wider now with max-w-3xl, but the input fields (Name and Description) are still narrow since they have a fixed width. Let me also make the inputs stretch to fill
the available space — they already use flex-1 but the label container might need w-full. 4) Claude performs a final check.
⏺ chrome-devtools - navigate_page (MCP)(url: "http://localhost:3007/tags/new")
⎿ Successfully navigated to http://localhost:3007/tags/new.
## Pages
1: http://localhost:3007/tags/new [selected]
⏺ chrome-devtools - take_screenshot (MCP)
⎿ Took a screenshot of the current page's viewport.
⎿ [Image]
⏺ Now the form card is wider and the Name/Description inputs stretch to fill the available space. The form makes much better use of the horizontal space.5) The fixed version:
