ChromeDevTools / chrome-devtools-mcp

2025-09-11 · Source: Github Trending: All languages · Field: Technology & Digital — Artificial Intelligence & Machine Learning, Software Development & Engineering · Depth: Intermediate, long

Summary

The `chrome-devtools-mcp` package enables AI coding agents like Gemini, Claude, Cursor, and Copilot to control and inspect a live Chrome browser. This Model-Context-Protocol (MCP) server provides AI assistants with full access to Chrome DevTools capabilities for reliable automation, in-depth debugging, and performance analysis. Key features include recording traces for performance insights, advanced browser debugging (network requests, screenshots, console messages with source maps), and reliable automation via Puppeteer. The tool requires Node.js v20.19+ and a current stable Chrome version. It collects usage statistics by default, which can be disabled with the `--no-usage-statistics` flag, and may send trace URLs to the Google CrUX API for real-user experience data, also opt-outable via `--no-performance-crux`.

Key takeaway

For AI Architects integrating browser automation and debugging into agent workflows, `chrome-devtools-mcp` offers a robust solution. You should configure your MCP client to utilize this server, paying close attention to `--autoConnect` or `--browser-url` options for seamless integration with existing Chrome instances. Be mindful of data privacy settings like `--no-usage-statistics` and `--no-performance-crux` to align with organizational policies.

Key insights

AI agents can control Chrome for advanced debugging, performance analysis, and automation via `chrome-devtools-mcp`.

Principles

• AI agents require browser control for comprehensive web interaction.
• DevTools capabilities are essential for deep web application analysis.

Method

Install `chrome-devtools-mcp` via npm, then configure your MCP client (e.g., Gemini, Copilot) to use it, specifying command-line arguments for browser connection or behavior.

In practice

• Automate browser tasks using `puppeteer` via AI agents.
• Analyze web performance by integrating CrUX data.
• Debug web applications with AI-driven console and network inspection.

Topics

• Chrome DevTools
• AI Coding Assistants
• Browser Automation
• Performance Analysis
• Model-Context-Protocol

Code references

• ChromeDevTools/chrome-devtools-mcp
• ChromeDevTools/devtools-frontend
• puppeteer/puppeteer
• nodejs/Release
• openai/codex

Best for: AI Architect, AI Engineer, Machine Learning Engineer, Software Engineer

Related on AIssential

• The agent-ready web: Simplify user actions with WebMCP — Tara Agyemang, Google — Web MCP transforms websites into structured APIs for AI agents, simplifying complex user actions.
• OpenAI launches Codex extension for Google Chrome — OpenAI's Codex Chrome extension broadens its utility for web-centric tasks beyond traditional development.
• How to Use Claude Code in Your Browser — Browser access allows coding agents to self-verify web implementations, significantly improving developer productivity and task completion.
• aws / agent-toolkit-for-aws — AI coding agents can now securely and effectively interact with AWS services through a specialized toolkit providing tools, knowledge, and guardrails.
• AI Didn’t Kill the Web, It Moved in! — Olivier Leplus (AWS) & Yohan Lasorsa (Microsoft) — AI is transforming web development across the entire lifecycle, from coding to agent-centric web app design.
• How to correctly use MCP servers with your AI Agents — Careful MCP server integration prevents context bloat and optimizes AI agent performance and cost.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by Github Trending: All languages.