Lilly Tech Systems
Introduction Beginner
The Chrome DevTools MCP server bridges Claude Code CLI and your Chrome browser. It lets Claude Code take screenshots, click elements, inspect the DOM, execute JavaScript, analyze performance, monitor network traffic, and run Lighthouse audits — all through the Chrome DevTools Protocol.
What is Chrome DevTools MCP?
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools. The chrome-devtools MCP server exposes Chrome's DevTools Protocol as MCP tools that Claude Code can use. This means Claude Code can interact with a real Chrome browser just like you would with DevTools, but through natural language commands.
What You Can Do
| Capability | Description | Example Use Case |
|---|---|---|
| Take screenshots | Capture the current page or specific elements | Visual debugging, verifying UI state |
| Click elements | Click buttons, links, and interactive elements | Navigating through flows, triggering actions |
| Fill forms | Type text into inputs and fill entire forms | Testing form submissions, data entry |
| Execute JavaScript | Run JS in the page context | Inspecting state, modifying DOM, debugging |
| Read console | View console messages (logs, errors, warnings) | Debugging runtime errors, checking logs |
| Monitor network | List and inspect network requests | API debugging, performance analysis |
| Performance tracing | Start/stop performance traces | Identifying bottlenecks, CPU profiling |
| Lighthouse audits | Run full Lighthouse audits | Performance, accessibility, SEO scoring |
| Memory snapshots | Take heap snapshots | Memory leak detection |
| Navigate pages | Navigate to URLs, manage browser pages | Multi-page workflows, testing navigation |
| Device emulation | Emulate mobile devices and screen sizes | Responsive design testing |
The Chrome DevTools MCP Server Tools
The MCP server provides these tools to Claude Code:
# Page Management list_pages # List all open browser tabs select_page # Switch to a specific tab new_page # Open a new tab close_page # Close a tab navigate_page # Navigate to a URL # Interaction click # Click an element by selector fill # Fill a text input fill_form # Fill multiple form fields type_text # Type text character by character press_key # Press a keyboard key hover # Hover over an element drag # Drag an element upload_file # Upload a file to an input handle_dialog # Handle alert/confirm dialogs # Inspection take_screenshot # Capture page screenshot take_snapshot # Get DOM/accessibility snapshot evaluate_script # Run JavaScript in page get_console_message # Read a console message list_console_messages # List all console messages # Network list_network_requests # List network requests get_network_request # Get details of a request # Performance performance_start_trace # Start performance recording performance_stop_trace # Stop and get trace data performance_analyze_insight # AI analysis of performance lighthouse_audit # Run Lighthouse audit take_memory_snapshot # Heap snapshot # Other emulate # Emulate device/screen size resize_page # Resize the browser window wait_for # Wait for element/condition
How the Connection Works
-
Chrome launches with a debugging port
Chrome exposes its DevTools Protocol on a specified port (usually 9222), allowing external tools to connect.
-
The MCP server connects to Chrome
The chrome-devtools MCP server connects to Chrome's debugging port and translates MCP tool calls into DevTools Protocol commands.
-
Claude Code uses the MCP tools
When you ask Claude Code to take a screenshot or click a button, it calls the appropriate MCP tool, which sends the command to Chrome and returns the result.
Ready to Get Started?
In the next lesson, you will install the Chrome DevTools MCP server, configure Claude Code, and connect to your first browser session.
Next: Setup →