---
title: The Chrome DevTool MCP General Availability
url: https://calvin.my/posts/the-chrome-devtool-mcp-general-availability
published: 2026-03-15
updated: 2026-09-16
category: AI
tags:
- Chrome
- mcp
- Claude
- gemini
summary: Chrome DevTools MCP is now generally available in Chrome 146’s stable channel, enabling AI command-line tools to connect to a running browser through remote debugging. The post outlines setup for Gemini CLI and Claude CLI, then demonstrates Claude inspecting a local page with screenshots, identifying unused layout space, applying form-width fixes, reloading the page, and verifying that the updated interface uses horizontal space more effectively.
---

# The Chrome DevTool MCP General Availability

Related article:

- [https://calvin.my/posts/claude-code-s-vision-the-chrome-devtool-mcp](../posts/claude-code-s-vision-the-chrome-devtool-mcp)

* * *

## 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:

   ```markup
   chrome://inspect/#remote-debugging
   ```

2. Click "Allow remote debugging for this browser instance".

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/46d1e699-202a-405d-b633-a1a114bbd122.png)

* * *

## Connects with Gemini CLI

Follow the steps [here](https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session#step_2_configure_chrome_devtools_mcp_server_to_automatically_connect_to_a_running_chrome_instance).

```json
{
   "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)

   ```bash
   claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --autoConnect
   ```

2. Ask Claude to test the access.

   ```markup
   ⏺ 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:

   ```markup
   If you look at the screen, there is so much more space on the right that we can occupy
   ```

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/7fe52979-c7e2-4129-ab85-f604b8f43ed3.png)

2. Claude takes a screenshot.

   ```markup
   ⏺ 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.

   ```markup
   ⏺ 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.

   ```markup
   ⏺ 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:

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/d55f2a4c-5f53-41ce-b8c9-ca4c28d8f559.png)