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.
-
Go to:
chrome://inspect/#remote-debugging -
Click "Allow remote debugging for this browser instance".
Connects with Gemini CLI
Follow the steps here.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--autoConnect"
]
}
}
}
Connects with Claude CLI
-
Run the following command. (Adjust the scope as needed)
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --autoConnect -
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
-
Telling Claude:
If you look at the screen, there is so much more space on the right that we can occupy
-
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. -
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. -
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. -
The fixed version:
