Google brings the power of Chrome DevTools to AI coding assistants with its Chrome DevTools Model Context Protocol server, now in public preview. 

The problem this new server aims to solve is that coding agents (Cursor, Claude Code, Gemini CLI, etc) might be writing the code but when building browser based applications they can't execute it in the browser; they are blind. Now the time has come for them to interact with a live Chrome browser.

In essence the MCP server exposes Chrome’s debugging and automation API so that the agents can take advantage of. This also means that you can control the browser in natural language.

That gives rise to new automation and debugging capabilities:

• Verify code changes in real-time
  
  
• Diagnose network and console errors
  
  
• Simulate user behavior
  
  
• Inspect the DOM
  
  
• Debug live styling and layout issues
  
  
• Automate performance audits

All these capabilites are provided by the MCP server exposing separate tools organized in categories. For instance there's 7 tools under Input automation:

• click
• drag
• fill
• fill_form
• handle_dialog
• hover
• upload_file

There's tools for Navigation automation like:

• close_page
• list_pages
• navigate_page

and thenEmulation, Performance, network and Debugging.

To get started is very easy. Just add the following instruction to your mcp client:

{
"mcpServers": {
   "chrome-devtools": {
       "command": "npx",
       "args": ["chrome-devtools-mcp@latest";]
      }
  }
}

More details on the available tools and how to use it are up on the project's Github page. Link below.

More Information

Chrome DevTools MCP

Related Articles

Jules Coding Agent Upgraded

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info