Chrome DevTools Plugin

Control Chrome DevTools directly from Claude Code for browser automation, debugging, performance analysis, and DOM inspection through the Model Context Protocol.

When to Use This MCP Server

Connect this server when you need to:

• Debug web applications by inspecting DOM elements, network requests, and JavaScript console output directly from Claude Code
• Automate browser interactions like navigating pages, clicking elements, and filling forms for testing or scraping workflows
• Capture performance profiles, lighthouse audits, and screenshots during development without manually switching to Chrome DevTools

Consider alternatives when:

• You need full end-to-end testing with assertions and test reporting, where Playwright or Cypress frameworks provide more structured test authoring
• Your debugging requires simultaneous inspection of multiple tabs or complex DevTools panel interactions that require the full Chrome DevTools GUI

Quick Start

Configuration

Copy
name: chrome-devtools-plugin
type: mcp
category: devtools

Example Connection

Copy
claude mcp:connect chrome-devtools-plugin

Available Tools

navigate:          Navigate Chrome to a URL and wait for page load completion
screenshot:        Capture a screenshot of the current page or a specific element
inspect-element:   Query DOM elements using CSS selectors and return their properties
console-logs:      Retrieve JavaScript console output including errors and warnings
network-monitor:   Capture and filter network requests with timing and payload data

Core Concepts

Chrome DevTools MCP Overview

Aspect	Details
Transport	stdio-based process via npx running chrome-devtools-mcp package
Protocol	Chrome DevTools Protocol (CDP) for direct browser communication
Browser	Connects to a running Chrome instance with remote debugging enabled
Automation	Full page interaction including clicks, typing, scrolling, and navigation
Analysis	DOM inspection, network monitoring, console capture, and performance profiling

Chrome DevTools Architecture

Claude Code IDE
    |
    v
[MCP Client] --stdio--> [chrome-devtools-mcp]
                              |
                              v
                     [Chrome DevTools Protocol]
                              |
                              v
                     [Chrome Browser Instance]
                      /       |        \
                   DOM     Network    Console
                  Tree     Monitor    Output
                      \       |        /
                       [Rendered Page]

Configuration

Parameter	Type	Default	Description
chrome_port	integer	9222	Chrome remote debugging port to connect to
launch_chrome	boolean	true	Automatically launch Chrome with debugging enabled if not running
headless	boolean	false	Run Chrome in headless mode without a visible browser window
default_timeout	integer	30000	Default timeout in milliseconds for page load and element waits
viewport_width	integer	1280	Default browser viewport width in pixels for consistent rendering

Best Practices

1. Launch Chrome with Remote Debugging - Start Chrome with the --remote-debugging-port=9222 flag before connecting the MCP server. If launch_chrome is enabled, the server handles this automatically, but manual launch gives you more control over flags and profiles.

2. Use Screenshots for Visual Verification - After performing DOM manipulations or navigation, capture screenshots to visually verify the result. This is especially useful when debugging CSS layout issues or verifying responsive design breakpoints.

3. Monitor Network Requests During API Development - Enable network-monitor when testing frontend code that calls your backend APIs. You can inspect request payloads, response bodies, and timing information without opening Chrome DevTools manually.

4. Set Appropriate Timeouts for SPAs - Single-page applications may take longer to render content after navigation. Increase default_timeout for applications that perform heavy client-side rendering or fetch data asynchronously after page load.

5. Use Headless Mode for CI Workflows - When running automated checks or generating screenshots in continuous integration pipelines, enable headless mode to avoid requiring a display server. Headless Chrome produces identical rendering results.

Common Issues

1. Cannot Connect to Chrome Instance - Ensure Chrome is running with --remote-debugging-port=9222 and no other process is already connected to that debugging port. Only one debugger client can connect to a Chrome debugging port at a time.

2. Element Not Found After Navigation - SPAs render content asynchronously after the initial page load event. Add explicit waits for the target element to appear in the DOM before attempting to inspect or interact with it.

3. Screenshot Captures Blank Page - The page may not have finished rendering when the screenshot is captured. Add a delay or wait for a specific DOM element to be present before capturing. Content loaded via JavaScript requires additional time beyond the initial load.