Player not loading? Watch on YouTube
Matthias Rohmer walks through setting up Chrome DevTools MCP so a coding assistant can use browser debugging tools. The tutorial covers Gemini CLI and editor configuration, including VS Code and Cursor. The server requires Node.js 20.19 or newer; the working directory should contain a package.json, which viewers can create with npm init.
Rohmer recommends project-scoped setup so teams can share configuration through their repository and enable the server only where they need it. He explains that tool definitions consume tokens and advises disabling overlapping browser tools already built into an agent. Gemini CLI stores its configuration in .gemini/settings.json, while the Cursor example uses .cursor/mcp.json.
The demonstrated capabilities include filling forms, emulating screen size and network conditions, measuring performance and running Lighthouse audits. Configuration arguments can disable tool categories. Slim mode limits the available tools to navigation and screenshots. To connect an AI agent to an already running Chrome instance, the tutorial uses auto-connect and requires remote debugging to be enabled at chrome://inspect/#devices.
The final checks use a Lighthouse audit or a login and page-creation flow. Rohmer suggests starting with a simple prompt to confirm that the setup works.
