Claude and chrome-devtools-mcp

 

The chrome-devtools-mcp https://github.com/ChromeDevTools/chrome-devtools-mcp/ [1]

Is an official MCP (Model Context Protocol) server from the chrome team that gives AI coding agents direct access to a live chrome browser and its DevTools Capabilities.

 

Why is this important?  It gives your AI a way to access the internet via its own Chrome browser so its not coding blind.   It can make a change and see that change in its own browser.

Some pre-setup 

I got this working on my Ubuntu 24.04 WSL system using Grok (see https://www.whiteboardcoder.com/2026/07/grok-and-chrome-devtools-mcp.html [2])

I had to install Chrome on Ubuntu using the following command (for WSL)

Here is a simple procedure to fix this. (For Ubuntu 24.04 in WSL)

 

> wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb > sudo apt install ./google-chrome-stable_current_amd64.deb > rm google-chrome-stable_current_amd64.deb

Now test it.

> google-chrome --version

 

Chances are you do not have my setup but just wanted to show what I had to do.

 

Getting it set up

Start Claude

> claude

Add the marketplace

> /plugin marketplace add ChromeDevTools/chrome-devtools-mcp

 

Success

Install the plugin 

> /plugin install chrome-devtools-mcp@chrome-devtools-plugins

 

Select User Scope

 

Installed

Restart Claude

And lets try it out.

> Open https://example.com and take a screen shot

 

That opened chrome and it also took a screen shot and saved it as a .png file.

OK can I do this headless ( and not open the chrome browser)

> Open https://example.com and take a screen shot, but do it in headless mode

That worked… but it took a while.

And it was a little Kludgy

So let’s add some stuff to ~/.claude.json

> vi ~/.claude.json

 

And update your mcpServers section

"mcpServers": {     "my-prompt-server": {       "type": "http",       "url": "http://localhost:8000/mcp"     }     "chrome-devtools": {         "command": "npx",         "args": ["chrome-devtools-mcp@1.6.0", "--headless=true"]       }   },

 

I added the chrome-devtools sections and added the –headless=true arg.Z
Let me restart Claude and test it.

> Open https://example.com and take a screen shot

OK that did not work… It still opened chrome

Looks like I need to disable the plugin version

> vi ~/.claude/settings.json

 

Make this false

Restart Claude and try again.

> Open https://example.com and take a screen shot

OK that worked in a headless manner!

 

 

References

 

[1]       chrome-devtools-mcp github repo
             https://github.com/ChromeDevTools/chrome-devtools-mcp/
            Accessed 07/2026
[2]       Grok and chrome-devtools-mcp
             https://www.whiteboardcoder.com/2026/07/grok-and-chrome-devtools-mcp.html
                Accessed 07/2026