Give Your AI Eyes: Introducing Chrome DevTools MCP (addyosmani.com)

Google announced Chrome DevTools MCP, a public-preview MCP (Model Context Protocol) server that gives AI coding assistants “eyes” inside a live Chrome browser. Built as an npm-distributed local process, it connects MCP-compatible agents (e.g., Cursor, Claude Code, Gemini CLI) to Chrome’s DevTools by translating high-level MCP tool calls into Chrome DevTools Protocol actions via Puppeteer. The result: agents can open pages, click buttons, run JavaScript, read the DOM and console, inspect network requests, take screenshots or DOM snapshots, and run performance traces — then return structured JSON results or human-readable analysis (e.g., LCP, total blocking time) so fixes are based on observed behavior, not guesswork. Technically, Chrome DevTools MCP wraps CDP with a reliable Puppeteer automation layer and exposes discrete MCP tools (navigate_page, list_console_messages, performance_start_trace, performance_analyze_insight, emulate_network, etc.). It runs locally, supports headful/headless modes, isolated user profiles, and can attach to existing browser instances. For AI/ML teams this closes the “blindfold” problem: agents can now verify code changes, diagnose runtime/network/console errors, reproduce user flows, and test under throttling or viewport emulation — enabling loop-closed debugging and more robust auto-fix workflows. Caveat: keep sensitive logged-in sites out of MCP sessions; isolation helps but isn’t a substitute for careful operational security.