iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article

🔧

Chrome DevTools MCP Guide: Controlling the Browser via AI Assistants

2026/01/15に公開

Chrome

開発環境

生産性

Model Context Protocol

tech

 IntroductionFor developers using AI coding assistants (such as Claude, Cursor, GitHub Copilot, etc.), did you know that you can operate browser developer tools directly from your AI?
Chrome DevTools MCP is a Model Context Protocol (MCP) server that allows AI assistants to access Chrome DevTools functionality. This enables AI assistants to automatically operate the browser, perform performance measurements, analyze network traffic, and check console errors.
In traditional AI assistance, even if code could be generated, you had to manually open a browser to verify its behavior. With Chrome DevTools MCP, the AI can generate code and then automatically validate its behavior.
This article covers the following:
Overview of Chrome DevTools MCP and the Model Context Protocol
Setup instructions for various AI clients (Claude, Cursor, VS Code Copilot, etc.)
Practical usage and examples
If you want to make your AI assistant a more powerful development partner, please read on.

 What is Chrome DevTools MCP?Chrome DevTools MCP is a Model Context Protocol (MCP) server released by Google that allows AI coding assistants to control and inspect the Chrome browser.

 What is Model Context Protocol (MCP)?Model Context Protocol (MCP) is an open standard for AI models to interact with external tools and services. It acts like a "USB-C" for AI models, allowing them to connect to various tools through a unified interface.
With the advent of MCP, developers no longer need to build individual integrations for each AI assistant. Once an MCP server is implemented, it becomes available to all MCP-compatible AI clients.

 Key Features of Chrome DevTools MCP
Live Browser Control: Launch and operate an actual Chrome browser

Access to DevTools: Measure performance, analyze networks, and retrieve console logs

Automation Capabilities: Reliable automation based on Puppeteer

Real-time Validation: Instantly verify AI-generated code in the browser

 What You Can AchieveUsing Chrome DevTools MCP, AI assistants can perform tasks such as:

Performance Analysis: Measurement of Core Web Vitals (LCP, FID, CLS) and recording traces

Network Debugging: Checking HTTP requests and diagnosing CORS errors

Console Error Checking: Automatic collection of JavaScript errors and warnings

UI Automation: Automatic execution of form inputs, clicks, and navigation

DOM and CSS Inspection: Live inspection of HTML structure and styles

Screenshots: Capturing pages for visual verification

 RequirementsTo use Chrome DevTools MCP, you need the following environment:

 System Requirements
Node.js: v20.19 or higher (latest LTS version recommended)

Chrome: Latest stable version

npm: Included with Node.js

MCP-compatible AI client: Claude Code, Cursor, VS Code Copilot, etc.

 Environment VerificationCheck your Node.js version using the following command:
node --version
# Confirm that it is v20.19.0 or higher
If Node.js is not installed, please download and install it from the official website.

 Setup MethodsThe setup for Chrome DevTools MCP varies depending on the AI client you use. This section explains how to set it up for major clients.

 Basic Configuration FlowThe basic flow is the same for all clients:
Add the MCP server configuration
Specify Chrome DevTools MCP
Restart the AI client (if necessary)
Confirm that the browser launches automatically

 Claude Code SetupIn Claude Code, you can easily set it up using the CLI.

 Setup via CLI (Recommended)# Add the MCP server using Claude Code CLI
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
Running this command will automatically update the configuration file.

 Setup in CursorIn Cursor, you can install it with a single click or add it via the settings screen.

 One-Click Install (Easiest)Click the link below to automatically install it in Cursor:
Install in Cursor

 Setup in VS Code CopilotIn VS Code Copilot, you can also set it up via one-click install or the CLI.

 One-Click InstallClick the following buttons in VS Code:
Install in VS Code (Stable)
Install in VS Code Insiders

 Setup via CLI# Add the MCP server using VS Code CLI
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

 Setup in Copilot CLIWhen using Copilot CLI:
# Launch Copilot CLI
copilot

# Add MCP server
/mcp add
Configure the following items:

Server name: chrome-devtools

Server Type: [1] Local

Command: npx -y chrome-devtools-mcp@latest
After configuring, save with CTRL+S.

 Other AI Clients
 WindsurfAdd the following to your configuration file:
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

 ClineAdd the standard configuration mentioned above according to the Cline configuration documentation.

 Gemini CLI# Project-specific
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Global
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

 VerificationOnce setup is complete, verify the operation with the following prompt:
Please check the performance of https://developers.chrome.com
If it is working correctly, the AI assistant will:
Automatically launch the Chrome browser
Access the specified URL
Record a performance trace
Analyze the results and report back
The assistant will execute a series of operations like these.
!The MCP server automatically launches the browser when a tool is used for the first time. Simply connecting to the MCP server will not launch the browser.

 Practical UsageHere are some of the main tools and usage examples available with Chrome DevTools MCP.

 Performance AnalysisYou can ask the AI assistant to measure performance:
Prompt Example:
Check Core Web Vitals for https://example.com and suggest improvements
The AI will perform an analysis like the following:
Access the page
Record a performance trace
Measure LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift)
Identify bottlenecks
Present specific improvement suggestions

 Network Request AnalysisYou can diagnose network errors and API issues:
Prompt Example:
Check network requests for https://example.com/dashboard and 
investigate the cause of any failed requests
The AI will:
Access the page and record network traffic
Identify failed requests (4xx, 5xx)
Detect CORS errors and timeouts
Propose causes and solutions

 Console Error CheckingYou can automatically collect and analyze JavaScript errors:
Prompt Example:
Check console errors for https://example.com and 
suggest fix methods if there are problems

 UI Automation and TestingYou can verify form behavior and test user flows:
Prompt Example:
Access https://example.com/login and 
verify if the login form works correctly.
Test account: test@example.com / password123
The AI will:
Access the page
Input data into form fields
Click the submit button
Verify the result (success/failure, error messages, etc.)
Analyze the cause if there is a problem

 Taking ScreenshotsWhen visual verification is needed:
Prompt Example:
Take a screenshot of https://example.com at 
mobile size (375x667)

 DOM and CSS InspectionYou can debug layout and style issues:
Prompt Example:
Inspect the header element of https://example.com and 
point out any responsive design issues

 List of Available ToolsChrome DevTools MCP provides numerous tools classified into the following categories:

 Input Automation (8 tools)
click: Click an element

drag: Drag and drop

fill: Input into a form field

fill_form: Input into multiple fields at once

handle_dialog: Handle alert and confirmation dialogs

hover: Mouse over an element

press_key: Keyboard input

upload_file: Upload a file

 Navigation Automation (6 tools)
close_page: Close a page

list_pages: List of open pages

navigate_page: Navigate to a URL

new_page: Open a new page

select_page: Select a page

wait_for: Wait for an element or text to appear

 Emulation (2 tools)
emulate: Emulate device and network conditions

resize_page: Change the browser window size

 Performance (3 tools)
performance_analyze_insight: Performance analysis

performance_start_trace: Start trace recording

performance_stop_trace: Stop trace recording

 Network (2 tools)
get_network_request: Get details of a specific request

list_network_requests: List all requests

 Debugging (5 tools)
evaluate_script: Execute JavaScript code

get_console_message: Get a specific console message

list_console_messages: List all console messages

take_screenshot: Take a screenshot

take_snapshot: Get an accessibility snapshot

 Advanced Configuration
 Connecting to an Existing Chrome InstanceYou can also connect to a Chrome browser that is already running.

 Enabling Remote Debugging!Important Changes in Chrome 136 and Later
Starting from Chrome 136, remote debugging on the default profile (the Chrome profile you normally use) has been prohibited to enhance security. When using remote debugging, you must specify a dedicated profile directory using the --user-data-dir flag.
This reduces the risk of malware or attackers exploiting remote debugging to steal cookies or session tokens.
Launch Chrome with the following options:
# Chrome 136 or later: Must specify --user-data-dir
# macOS/Linux
google-chrome --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug-profile \
  --no-first-run --disable-default-apps

# Windows
chrome.exe --remote-debugging-port=9222 ^
  --user-data-dir=%TEMP%\chrome-debug-profile ^
  --no-first-run --disable-default-apps
Parameter Descriptions:

--remote-debugging-port=9222: Port for remote debugging

--user-data-dir: Directory for the dedicated profile (Required for Chrome 136 and later)

--no-first-run: Skip the first-run UI

--disable-default-apps: Disable default apps

 Changing MCP Settings{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

 Debugging with Authenticated SessionsIn Chrome 136 and later, a specific procedure is required when debugging web applications that require authentication (such as X/Twitter, LinkedIn, GitHub, etc.).
Procedure:
Launch Chrome with a dedicated profile
google-chrome --remote-debugging-port=9222 \
  --user-data-dir=~/chrome-mcp-profile
Log in to each service in the browser
Log in to the required services (X, GitHub, etc.) in the launched Chrome instance.
Login information will be saved in the dedicated profile.
Connect from the MCP server
When the AI assistant connects to this Chrome instance, it can debug in a logged-in state.
The session will persist within the dedicated profile.
Notes:
While it is possible to directly copy data from a normal Chrome profile, there is a risk of data corruption.
It is recommended to create a dedicated profile for debugging and log in only to the necessary services.
From a security perspective, please use test accounts rather than production accounts.

 Automatic Connection SettingsIn Chrome 145 and later, the automatic connection feature is available:
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--auto-connect"
      ]
    }
  }
}
With this setting, the MCP server will automatically connect to a running Chrome instance.

 Custom Configuration OptionsOther configuration options:

--headless: Run in headless mode

--user-data-dir: Custom user data directory

--viewport: Default viewport size
For more details, please refer to the official documentation.

 SummaryUsing Chrome DevTools MCP, AI assistants can directly operate the Chrome browser, enabling them to perform tasks such as performance measurement, network analysis, and UI automation. Based on the Model Context Protocol standard, it is available across multiple AI clients such as Claude Code, Cursor, and VS Code Copilot.
Setup can be completed for most clients with just a single click or a few lines of configuration. When using Chrome 136 or later, you must specify a dedicated profile using the --user-data-dir flag during remote debugging due to enhanced security.
This technology allows AI assistants to handle everything from code generation to actual behavior verification, significantly shortening the development and debugging cycle for web applications.

 Reference Links
 Official DocumentationChrome DevTools MCP - GitHub
Chrome DevTools MCP - Official Blog (Japanese)
Tool Reference
Troubleshooting Guide
Model Context Protocol Official Site

 Japanese Commentary ArticlesChrome DevTools MCP Introduction and Troubleshooting - Qiita
How to use Chrome DevTools MCP Server - Apidog

iTranslated by AI

Introduction

What is Chrome DevTools MCP?

What is Model Context Protocol (MCP)?

Key Features of Chrome DevTools MCP

What You Can Achieve

Requirements

System Requirements

Environment Verification

Setup Methods

Basic Configuration Flow

Claude Code Setup

Setup via CLI (Recommended)

Setup in Cursor

One-Click Install (Easiest)

Setup in VS Code Copilot

One-Click Install

Setup via CLI

Setup in Copilot CLI

Other AI Clients

Windsurf

Cline

Gemini CLI

Verification

Practical Usage

Performance Analysis

Network Request Analysis

Console Error Checking

UI Automation and Testing

Taking Screenshots

DOM and CSS Inspection

List of Available Tools

Input Automation (8 tools)

Navigation Automation (6 tools)

Emulation (2 tools)

Performance (3 tools)

Network (2 tools)

Debugging (5 tools)

Advanced Configuration

Connecting to an Existing Chrome Instance

Enabling Remote Debugging

Changing MCP Settings

Debugging with Authenticated Sessions

Automatic Connection Settings

Custom Configuration Options

Summary

Reference Links

Official Documentation

Japanese Commentary Articles

Discussion