Back to Details

devtools

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Chrome DevTools MCP Setup

Chrome DevTools MCP 设置

Overview

概述

This skill automates the setup and launch of Chrome with remote debugging for use with the chrome-devtools-mcp server. It handles environment detection, Chrome installation verification, MCP configuration, and browser launch across Windows, Linux, and WSL2.
GitHub Repository: https://github.com/ChromeDevTools/chrome-devtools-mcp
本Skill可自动完成Chrome的设置与启动，并开启远程调试功能，以供chrome-devtools-mcp服务器使用。它支持在Windows、Linux和WSL2环境下进行环境检测、Chrome安装验证、MCP配置以及浏览器启动。
GitHub仓库： https://github.com/ChromeDevTools/chrome-devtools-mcp

Why Give Claude Browser Access?

为何要让Claude访问浏览器？

Without browser access, Claude is "coding blindfolded" - making changes without seeing the results. The Chrome DevTools MCP server provides 26 specialised tools that give Claude eyes into your running application:
CategoryCapabilities
Visual InspectionTake screenshots, capture DOM snapshots, see rendered output
Console & LoggingRead console messages, catch JavaScript errors, debug issues
Network AnalysisInspect API requests/responses, analyse headers, debug fetch calls
PerformanceRecord traces, measure Core Web Vitals (LCP, CLS, TBT), identify bottlenecks
User SimulationClick elements, fill forms, drag-and-drop, handle dialogs
Device EmulationSimulate mobile viewports, throttle CPU/network, test responsive design
This enables Claude to:
  • Verify changes visually instead of guessing if CSS/layout is correct
  • Debug runtime errors by reading actual console output
  • Test user flows by simulating clicks and form submissions
  • Identify performance issues with real Core Web Vitals data
  • Catch regressions by comparing screenshots before/after changes
如果没有浏览器访问权限，Claude就像“蒙眼编码”——无法看到修改结果就进行更改。Chrome DevTools MCP服务器提供了26种专用工具，让Claude能够“看到”你正在运行的应用：
类别功能
可视化检查截图、捕获DOM快照、查看渲染输出
控制台与日志读取控制台消息、捕获JavaScript错误、调试问题
网络分析查看API请求/响应、分析请求头、调试fetch调用
性能分析录制性能轨迹、测量Core Web Vitals（LCP、CLS、TBT）、识别性能瓶颈
用户模拟点击元素、填写表单、拖放操作、处理对话框
设备模拟模拟移动视口、限制CPU/网络速度、测试响应式设计
这让Claude能够：
  • 可视化验证修改，无需猜测CSS/布局是否正确
  • 通过读取实际控制台输出来调试运行时错误
  • 通过模拟点击和表单提交来测试用户流程
  • 借助真实的Core Web Vitals数据识别性能问题
  • 通过对比修改前后的截图来捕获回归问题

Quick Start Workflow

快速开始流程

Execute these steps in order:
请按以下顺序执行步骤：

Step 1: Detect Environment

步骤1：检测环境

Run the environment detection script to determine the platform:
bash
bash scripts/detect_environment.sh
The script returns one of: 
windows
, 
linux
, or 
wsl2
运行环境检测脚本以确定当前平台：
bash
bash scripts/detect_environment.sh
该脚本会返回以下值之一：
windows
、
linux
或
wsl2

Step 2: Verify Chrome Installation

步骤2：验证Chrome安装

Run the Chrome check script with the detected environment:
bash
bash scripts/check_chrome.sh <environment>
The script outputs 
status:installed
or 
status:not_installed
. If Chrome is not installed, the script provides detailed installation instructions. See the Chrome Installation section below for manual installation options.
IMPORTANT: Do not proceed to later steps until Chrome is installed and verified.
使用检测到的环境运行Chrome检查脚本：
bash
bash scripts/check_chrome.sh <environment>
该脚本会输出
status:installed
或
status:not_installed
。如果未安装Chrome，脚本会提供详细的安装说明。如需手动安装选项，请查看下方的Chrome安装章节。
重要提示： 在Chrome安装并验证完成前，请不要进行后续步骤。

Step 3: Check MCP Server Status

步骤3：检查MCP服务器状态

Verify if chrome-devtools-mcp is configured:
bash
claude mcp list | grep -i chrome
If not installed, install with:
bash
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222
验证chrome-devtools-mcp是否已配置：
bash
claude mcp list | grep -i chrome
如果未安装，请使用以下命令安装：
bash
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

Step 4: Detect Running Dev Server

步骤4：检测运行中的开发服务器

Check for running dev servers on common ports:
bash
bash scripts/detect_dev_server.sh
This checks ports 5173, 5174, 5175, 3000, 3001, 8080, and 8000.
If no dev server is running and one is needed, offer to start it:
  • For Vite projects: 
    npm run dev
  • For Next.js: 
    npm run dev
    or 
    npx next dev
  • For React CRA: 
    npm start
检查常用端口上是否有运行中的开发服务器：
bash
bash scripts/detect_dev_server.sh
该脚本会检查端口5173、5174、5175、3000、3001、8080和8000。
如果没有运行中的开发服务器且需要启动，请使用以下命令：
  • 对于Vite项目：
    npm run dev
  • 对于Next.js项目：
    npm run dev
    或 
    npx next dev
  • 对于React CRA项目：
    npm start

Step 5: Launch Chrome with Debugging

步骤5：启动带调试功能的Chrome

Launch Chrome with remote debugging enabled:
bash
bash scripts/launch_chrome.sh <environment> <url> [headed]
Arguments:
  • <environment>
    : 
    windows
    , 
    linux
    , or 
    wsl2
  • <url>
    : Target URL (e.g., 
    http://localhost:5173
    )
  • [headed]
    : Optional - pass 
    headed
    for visible browser, omit for headless (default)
Examples:
bash
undefined
启动Chrome并启用远程调试：
bash
bash scripts/launch_chrome.sh <environment> <url> [headed]
参数说明：
  • <environment>
    ：
    windows
    、
    linux
    或
    wsl2
  • <url>
    ：目标URL（例如：
    http://localhost:5173
    ）
  • [headed]
    ：可选参数 - 传入
    headed
    会启动可见的浏览器窗口，省略则以无头模式启动（默认）
示例：
bash
undefined

Headless (default)

无头模式（默认）

bash scripts/launch_chrome.sh wsl2 http://localhost:5173
bash scripts/launch_chrome.sh wsl2 http://localhost:5173

Headed (visible browser)

有头模式（可见浏览器）

bash scripts/launch_chrome.sh wsl2 http://localhost:5173 headed
undefined
bash scripts/launch_chrome.sh wsl2 http://localhost:5173 headed
undefined

Platform-Specific Commands

平台专属命令

WSL2 / Linux

WSL2 / Linux

bash
undefined
bash
undefined

Headless

无头模式

google-chrome --headless --remote-debugging-port=9222 --no-first-run --user-data-dir=/tmp/chrome-mcp http://localhost:5173 &
google-chrome --headless --remote-debugging-port=9222 --no-first-run --user-data-dir=/tmp/chrome-mcp http://localhost:5173 &

Headed

有头模式

google-chrome --remote-debugging-port=9222 --no-first-run --user-data-dir=/tmp/chrome-mcp http://localhost:5173 &
undefined
google-chrome --remote-debugging-port=9222 --no-first-run --user-data-dir=/tmp/chrome-mcp http://localhost:5173 &
undefined

Windows (CMD/PowerShell)

Windows（CMD/PowerShell）

cmd
REM Headless
start chrome.exe --headless --remote-debugging-port=9222 --no-first-run --user-data-dir=%TEMP%\chrome-mcp http://localhost:5173

REM Headed
start chrome.exe --remote-debugging-port=9222 --no-first-run --user-data-dir=%TEMP%\chrome-mcp http://localhost:5173
cmd
REM 无头模式
start chrome.exe --headless --remote-debugging-port=9222 --no-first-run --user-data-dir=%TEMP%\chrome-mcp http://localhost:5173

REM 有头模式
start chrome.exe --remote-debugging-port=9222 --no-first-run --user-data-dir=%TEMP%\chrome-mcp http://localhost:5173

Chrome Installation

Chrome安装

If Chrome is not detected, install it using one of these methods:
如果未检测到Chrome，请使用以下方法之一进行安装：

Linux / WSL2

Linux / WSL2

Option 1: Direct download (recommended)
bash
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install -y ./google-chrome-stable_current_amd64.deb
Option 2: Add Google's repository
bash
undefined
选项1：直接下载（推荐）
bash
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install -y ./google-chrome-stable_current_amd64.deb
选项2：添加Google软件源
bash
undefined

Add signing key

添加签名密钥

wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/google-chrome.gpg
wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/google-chrome.gpg

Add repository

添加软件源

echo 'deb [arch=amd64 signed-by=/usr/share/keyrings/google-chrome.gpg] http://dl.google.com/linux/chrome/deb/ stable main' | sudo tee /etc/apt/sources.list.d/google-chrome.list
echo 'deb [arch=amd64 signed-by=/usr/share/keyrings/google-chrome.gpg] http://dl.google.com/linux/chrome/deb/ stable main' | sudo tee /etc/apt/sources.list.d/google-chrome.list

Install

安装

sudo apt update sudo apt install -y google-chrome-stable

**Option 3: Chromium (open-source alternative)**
```bash
sudo apt update
sudo apt install -y chromium-browser
sudo apt update sudo apt install -y google-chrome-stable

**选项3：Chromium（开源替代方案）**
```bash
sudo apt update
sudo apt install -y chromium-browser

Windows

Windows

Option 1: Download from Google Visit https://www.google.com/chrome/ and run the installer.
Option 2: Using winget
powershell
winget install Google.Chrome
Option 3: Using Chocolatey
powershell
choco install googlechrome
Option 4: PowerShell direct download
powershell
$installer = "$env:TEMP\chrome_installer.exe"
Invoke-WebRequest -Uri "https://dl.google.com/chrome/install/latest/chrome_installer.exe" -OutFile $installer
Start-Process -FilePath $installer -Args "/silent /install" -Wait
Remove-Item $installer
选项1：从Google官网下载 访问https://www.google.com/chrome/ 并运行安装程序。
选项2：使用winget
powershell
winget install Google.Chrome
选项3：使用Chocolatey
powershell
choco install googlechrome
选项4：通过PowerShell直接下载
powershell
$installer = "$env:TEMP\chrome_installer.exe"
Invoke-WebRequest -Uri "https://dl.google.com/chrome/install/latest/chrome_installer.exe" -OutFile $installer
Start-Process -FilePath $installer -Args "/silent /install" -Wait
Remove-Item $installer

Verify Installation

验证安装

After installation, verify with:
bash
bash scripts/check_chrome.sh <environment>
安装完成后，使用以下命令验证：
bash
bash scripts/check_chrome.sh <environment>

MCP Configuration

MCP配置

Quick Install

快速安装

bash
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222
bash
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

Configuration Reference

配置参考

All flags can be passed via the 
args
array in 
.mcp.json
:
FlagDescriptionDefault
--browserUrl
, 
-u
Connect to running Chrome (e.g., 
http://127.0.0.1:9222
)		-
--autoConnect
Auto-connect to Chrome 145+ with remote debugging enabled
false
--headless
Run in headless (no UI) mode
false
--isolated
Use temporary user-data-dir, auto-cleaned on close
false
--channel
Chrome channel: 
stable
, 
canary
, 
beta
, 
dev
stable
--viewport
Initial viewport size (e.g., 
1280x720
, max 
3840x2160
headless)		-
--executablePath
, 
-e
Path to custom Chrome executable-
--userDataDir
Custom user data directory
~/.cache/chrome-devtools-mcp/chrome-profile
--wsEndpoint
, 
-w
WebSocket endpoint (alternative to 
--browserUrl
)		-
--wsHeaders
Custom WebSocket headers as JSON (use with 
--wsEndpoint
)		-
--proxyServer
Proxy server for Chrome-
--acceptInsecureCerts
Ignore self-signed/expired certificate errors
false
--chromeArg
Additional Chrome launch arguments (array)-
--logFile
Debug log file path (set 
DEBUG=*
for verbose)		-
--categoryEmulation
Include emulation tools
true
--categoryPerformance
Include performance tools
true
--categoryNetwork
Include network tools
true
所有参数均可通过
.mcp.json
中的
args
数组传递：
参数说明默认值
--browserUrl
, 
-u
连接到运行中的Chrome（例如：
http://127.0.0.1:9222
）		无
--autoConnect
自动连接到启用了远程调试的Chrome 145及以上版本
false
--headless
以无头模式（无界面）运行
false
--isolated
使用临时用户数据目录，关闭时自动清理
false
--channel
Chrome渠道：
stable
、
canary
、
beta
、
dev
stable
--viewport
初始视口尺寸（例如：
1280x720
，无头模式最大
3840x2160
）		无
--executablePath
, 
-e
自定义Chrome可执行文件路径无
--userDataDir
自定义用户数据目录
~/.cache/chrome-devtools-mcp/chrome-profile
--wsEndpoint
, 
-w
WebSocket端点（
--browserUrl
的替代方案）		无
--wsHeaders
自定义WebSocket头（JSON格式，需与
--wsEndpoint
配合使用）		无
--proxyServer
Chrome使用的代理服务器无
--acceptInsecureCerts
忽略自签名/过期证书错误
false
--chromeArg
额外的Chrome启动参数（数组形式）无
--logFile
调试日志文件路径（设置
DEBUG=*
可启用详细日志）		无
--categoryEmulation
启用模拟工具
true
--categoryPerformance
启用性能工具
true
--categoryNetwork
启用网络工具
true

Basic Configuration

基础配置

json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl",
        "http://127.0.0.1:9222"
      ]
    }
  }
}
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl",
        "http://127.0.0.1:9222"
      ]
    }
  }
}

Headless with Isolated Profile

无头模式与独立配置文件

Best for CI/CD or automated testing - uses a temporary profile that's cleaned up automatically:
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--headless",
        "--isolated"
      ]
    }
  }
}
适用于CI/CD或自动化测试 - 使用临时配置文件，关闭浏览器时会自动清理：
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--headless",
        "--isolated"
      ]
    }
  }
}

Custom Viewport for Mobile Testing

移动端测试自定义视口

json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222",
        "--viewport=390x844"
      ]
    }
  }
}
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222",
        "--viewport=390x844"
      ]
    }
  }
}

Using Chrome Canary/Beta

使用Chrome Canary/Beta版本

json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless",
        "--isolated"
      ]
    }
  }
}
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless",
        "--isolated"
      ]
    }
  }
}

With Debug Logging

启用调试日志

json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222",
        "--logFile=/tmp/chrome-devtools-mcp.log"
      ],
      "env": {
        "DEBUG": "*"
      }
    }
  }
}
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222",
        "--logFile=/tmp/chrome-devtools-mcp.log"
      ],
      "env": {
        "DEBUG": "*"
      }
    }
  }
}

WebSocket Connection with Auth Headers

带认证头的WebSocket连接

For connecting to remote Chrome instances with authentication:
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}
To get the WebSocket endpoint, visit 
http://127.0.0.1:9222/json/version
and look for 
webSocketDebuggerUrl
.
用于连接需要认证的远程Chrome实例：
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}
如需获取WebSocket端点，请访问
http://127.0.0.1:9222/json/version
并查找
webSocketDebuggerUrl
字段。

Connection Methods

连接方式

Method 1: Manual Connection (Recommended)

方式1：手动连接（推荐）

Start Chrome yourself with remote debugging, then connect via 
--browserUrl
. This is the approach used in the Quick Start Workflow above.
When to use:
  • Running Claude in a sandboxed environment
  • Need full control over Chrome launch options
  • Working with self-signed certificates
自行启动带远程调试的Chrome，然后通过
--browserUrl
连接。这是快速开始流程中使用的方法。
适用场景：
  • 在沙箱环境中运行Claude
  • 需要完全控制Chrome的启动选项
  • 使用自签名证书的场景

Method 2: Auto-Connect (Chrome 145+)

方式2：自动连接（Chrome 145及以上版本）

Let chrome-devtools-mcp automatically connect to a running Chrome instance.
Step 1: Enable remote debugging in Chrome:
  1. Navigate to 
    chrome://inspect/#remote-debugging
  2. Follow the dialog to allow debugging connections
Step 2: Configure MCP with 
--autoConnect
:
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}
When to use:
  • Sharing state between manual testing and Claude-driven testing
  • Avoiding WebDriver sign-in blocks (some sites block automated browsers)
  • Want Chrome to prompt for permission before Claude connects
让chrome-devtools-mcp自动连接到运行中的Chrome实例。
步骤1： 在Chrome中启用远程调试：
  1. 访问
    chrome://inspect/#remote-debugging
  2. 按照提示对话框允许调试连接
步骤2： 配置MCP并启用
--autoConnect
：
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}
适用场景：
  • 在手动测试与Claude驱动的测试之间共享状态
  • 避免WebDriver登录拦截（部分网站会拦截自动化浏览器）
  • 希望Claude连接前Chrome会提示获取权限

Method 3: Let MCP Launch Chrome

方式3：让MCP启动Chrome

If you omit 
--browserUrl
and 
--autoConnect
, the MCP server will launch its own Chrome instance.
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--headless", "--isolated"]
    }
  }
}
When to use:
  • Fully automated workflows
  • No need to maintain browser state
  • CI/CD pipelines
如果省略
--browserUrl
和
--autoConnect
，MCP服务器会自行启动Chrome实例。
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--headless", "--isolated"]
    }
  }
}
适用场景：
  • 全自动化工作流
  • 无需保留浏览器状态
  • CI/CD流水线

User Data Directory

用户数据目录

By default, chrome-devtools-mcp uses a persistent profile at:
  • Linux/macOS: 
    $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
  • Windows: 
    %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
This profile is shared across all MCP sessions, preserving cookies, local storage, and login state.
Use 
--isolated
for a fresh, temporary profile that's automatically cleaned up when the browser closes.
默认情况下，chrome-devtools-mcp会使用以下路径的持久化配置文件：
  • Linux/macOS： 
    $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
  • Windows： 
    %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
该配置文件会在所有MCP会话中共享，保留Cookie、本地存储和登录状态。
使用
--isolated
参数可创建全新的临时配置文件，浏览器关闭时会自动清理。

Troubleshooting

故障排查

For detailed troubleshooting steps, read 
references/troubleshooting.md
.
如需详细的故障排查步骤，请查看
references/troubleshooting.md
。

Quick Checks

快速检查

  1. Test MCP server runs:
    bash
    npx chrome-devtools-mcp@latest --help
  2. Verify Chrome is listening:
    bash
    curl -s http://127.0.0.1:9222/json/version
  3. Check for existing Chrome processes:
    bash
    # Linux/WSL2
pgrep -a chrome

# Windows
tasklist | findstr chrome
  1. 测试MCP服务器能否运行：
    bash
    npx chrome-devtools-mcp@latest --help
  2. 验证Chrome是否在监听端口：
    bash
    curl -s http://127.0.0.1:9222/json/version
  3. 检查是否有Chrome进程在运行：
    bash
    # Linux/WSL2
pgrep -a chrome

# Windows
tasklist | findstr chrome

Common Issues

常见问题

IssueSolution
"Target closed" errorClose all Chrome instances, restart with debugging
Module not foundClear npm cache: 
rm -rf ~/.npm/_npx && npm cache clean --force
Connection refusedEnsure Chrome launched with 
--remote-debugging-port=9222
Port already in useKill existing Chrome or use different port
Chrome won't start in sandboxUse 
--browserUrl
to connect to manually-started Chrome
WebDriver sign-in blockedUse 
--autoConnect
to connect to your normal browser session
VM-to-host connection failsSee 
references/troubleshooting.md
for port forwarding guidance
问题解决方案
"Target closed"错误关闭所有Chrome实例，重新启动并开启调试
模块未找到清理npm缓存：
rm -rf ~/.npm/_npx && npm cache clean --force
连接被拒绝确保Chrome启动时添加了
--remote-debugging-port=9222
参数
端口已被占用终止现有Chrome进程或使用其他端口
Chrome无法在沙箱中启动使用
--browserUrl
连接到手动启动的Chrome
WebDriver登录被拦截使用
--autoConnect
连接到你的常规浏览器会话
虚拟机到主机的连接失败查看
references/troubleshooting.md
中的端口转发指南

Known Limitations

已知限制

Operating System Sandboxes

操作系统沙箱

Some MCP clients sandbox the server using macOS Seatbelt or Linux containers. In sandboxed environments, chrome-devtools-mcp cannot start Chrome (which requires its own sandbox permissions).
Workarounds:
  1. Disable sandboxing for chrome-devtools-mcp in your MCP client
  2. Use 
    --browserUrl
    to connect to a Chrome instance started outside the sandbox
部分MCP客户端会使用macOS Seatbelt或Linux容器对服务器进行沙箱隔离。在沙箱环境中，chrome-devtools-mcp无法启动Chrome（因为Chrome需要自身的沙箱权限）。
解决方法：
  1. 在你的MCP客户端中禁用chrome-devtools-mcp的沙箱隔离
  2. 使用
    --browserUrl
    连接到在沙箱外启动的Chrome实例

Security Considerations

安全注意事项

The remote debugging port exposes your browser to any application on your machine. When debugging is enabled:
  • Avoid browsing sensitive sites (banking, email with sensitive data)
  • Use 
    --isolated
    for a separate profile
  • Close Chrome when done debugging
远程调试端口会让你的浏览器对本地所有应用开放。启用调试时：
  • 避免访问敏感网站（如银行、包含敏感数据的邮箱）
  • 使用
    --isolated
    参数创建独立配置文件
  • 调试完成后关闭Chrome

Verification

验证

After setup, verify the connection works:
  1. Chrome should be running with remote debugging
  2. MCP server should connect to 
    http://127.0.0.1:9222
  3. Test with 
    mcp__chrome-devtools__list_pages
    tool
设置完成后，验证连接是否正常：
  1. Chrome应已启动并开启远程调试
  2. MCP服务器应已连接到
    http://127.0.0.1:9222
  3. 使用
    mcp__chrome-devtools__list_pages
    工具进行测试