Chrome DevTools MCP Server

一个基于 Model Context Protocol (MCP) 的 Chrome DevTools 控制服务器，为 AI 辅助前端开发提供强大的浏览器调试能力。

- 🚀启动和控制 Chrome 浏览器- 自动启动开发环境的 Chrome 实例
- 🔗远程连接 CDP- 连接到已运行的 Chrome、Electron 或其他 V8 内核程序
- 🔍DOM 查询和分析- 获取页面 DOM 树结构，查询特定元素
- 🌐网络请求监控- 实时捕获和分析所有网络请求和响应
- 📝Console 日志捕获- 获取所有控制台输出，包括错误、警告和日志
- 💻JavaScript 执行- 在页面上下文中执行任意 JavaScript 代码
- 🎯页面导航- 控制浏览器导航到指定 URL
- 📸截图功能- 捕获当前页面的截图
- ℹ️页面信息获取- 获取页面标题、URL、元数据等信息
- 🐛JavaScript 断点调试- 设置各种类型的断点，支持条件断点
- 🎮调试控制- 暂停、继续、单步执行等调试操作

- Python 3.7+
- Google Chrome 浏览器
- macOS/Linux/Windows

git clone https://github.com/yourusername/chrome-devtool-mcp.git cd chrome-devtool-mcp

python -m venv venv source venv/bin/activate # macOS/Linux # 或 venv\Scripts\activate # Windows

MCP_PORT=8080 python src/chrome_devtools_mcp.py

mkdir -p ~/.config/claude/mcp nano ~/.config/claude/mcp/chrome-devtools.json

mkdir -p $env:APPDATA\claude\mcp notepad $env:APPDATA\claude\mcp\chrome-devtools.json

{ "mcpServers": { "chrome-devtools": { "command": "python", "args": ["/path/to/chrome-devtool-mcp/mcp_server.py"], "env": {} } } }

如果你已经有其他 MCP 服务器在运行，可以通过以下方式添加 Chrome DevTools 服务器：

{ "mcpServers": { "existing-server": { // ... 现有配置 }, "chrome-devtools": { "command": "python", "args": ["/path/to/chrome-devtool-mcp/mcp_server.py"], "env": {} } } }

export CLAUDE_MCP_CHROME_DEVTOOLS="python /path/to/chrome-devtool-mcp/mcp_server.py" claude-code

- launch_chrome
- connect_remote_chrome
- connect_websocket_url
- list_available_targets
- navigate_to
- get_dom_tree
- query_elements
- get_network_logs
- get_console_logs
- execute_javascript
- take_screenshot
- get_page_info
- get_script_sources
- get_script_source
- search_in_scripts
- get_page_functions
- set_breakpoint
- list_breakpoints
- remove_breakpoint
- get_paused_info
- resume_execution
- step_over
- close_chrome
- 首先确保 MCP 服务器已启动：

python simple_mcp_server.py # 服务器运行在 http://localhost:12524

{ "mcpServers": { "chrome-devtools": { "command": "python3", "args": ["/path/to/chrome-devtool-mcp/src/chrome_devtools_mcp.py"] } } }

- 设置环境变量并启动服务器：

MCP_PORT=8080 MCP_HOST=127.0.0.1 python src/chrome_devtools_mcp.py

{ "mcpServers": { "chrome-devtools": { "command": "python3", "args": ["/path/to/chrome-devtool-mcp/src/chrome_devtools_mcp.py"], "env": { "MCP_PORT": "8080", "MCP_HOST": "127.0.0.1" } } } }

- 使用@符号查看可用的 MCP 工具
- 或者询问 "列出所有可用的 Chrome DevTools 工具"

- launch_chrome
- connect_remote_chrome
- connect_websocket_url
- list_available_targets
- navigate_to
- get_dom_tree
- query_elements
- get_network_logs
- get_console_logs
- execute_javascript
- take_screenshot
- get_page_info
- get_script_sources
- get_script_source
- search_in_scripts
- get_page_functions
- set_breakpoint
- list_breakpoints
- remove_breakpoint
- get_paused_info
- resume_execution
- step_over
- close_chrome
- 确保服务器正在运行：

curl http://localhost:12524/health

使用 navigate_to 工具访问 http://localhost:3000

使用 query_elements 工具查找所有 class 为 "button" 的元素

使用 execute_javascript 工具在页面上执行 console.log('Hello from AI!')

1. 启动 Chrome 并导航到 React 应用 2. 使用 execute_javascript 执行： window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values().next().value.findFiberByHostInstance(document.querySelector('#root'))._debugOwner.stateNode.state 3. 分析返回的状态数据

1. 清空网络日志 2. 触发应用中的某个操作 3. 使用 get_network_logs 筛选特定 API 端点 4. 分析请求和响应数据

1. 使用 execute_javascript 执行 performance.mark('start') 2. 执行一系列操作 3. 使用 execute_javascript 执行 performance.mark('end') 和 performance.measure('operation', 'start', 'end') 4. 获取性能数据

1. 使用 connect_remote_chrome 连接到已运行的应用 2. 使用 query_elements 找到登录按钮选择器（如 '#login-btn'） 3. 使用 set_breakpoint('dom', '#login-btn') 在登录按钮上设置断点 4. 点击登录按钮，调试器会暂停 5. 使用 get_console_logs 查看控制台输出 6. 使用 get_paused_info 查看暂停位置和调用栈 7. 使用 resume_execution 继续执行

1. 启动 Electron 应用时添加 --remote-debugging-port=9222 参数 2. 使用 connect_remote_chrome('localhost', 9222) 连接 3. 使用各种调试工具进行分析 4. 设置断点并调试特定功能

1. 使用 list_available_targets() 列出所有可用的标签页 2. 选择目标标签页的 webSocketDebuggerUrl 3. 使用 connect_websocket_url(ws_url) 切换到该标签页 4. 现在所有操作都会在新的标签页上执行

# 列出所有标签页 targets = list_available_targets() # 选择第二个标签页 ws_url = targets['data']['targets'][1]['webSocketDebuggerUrl'] # 切换到该标签页 connect_websocket_url(ws_url)

- headless(bool): 是否无头模式运行，默认 false
- port(int): 远程调试端口，默认 9222

连接到远程 Chrome/Chromium 实例（如 Electron 应用）。

- host(str): 远程主机地址，默认 localhost
- port(int): 远程调试端口，默认 9222

- ws_url(str): WebSocket 调试器 URL，如 'ws://localhost:9222/devtools/page/ABC123'

- 切换不同的标签页/页面
- 连接到特定的调试会话
- 从其他工具获取的 WebSocket URL

- host(str): Chrome 主机地址，默认 localhost
- port(int): Chrome 调试端口，默认 9222

- level(str, optional): 日志级别过滤（error, warning, log, info）

- breakpoint_type(str): 断点类型 - 'dom', 'event', 'function', 'xhr', 'line', 'logpoint'
- target(str): 断点目标（如 DOM 选择器、函数名、URL:行号）
- options(dict, optional): 额外选项

- condition: 条件表达式，只在条件为真时触发

- logMessage: 日志消息（用于日志断点）
- pause: 是否暂停执行（默认：logpoint 为 False，其他为 True）

- DOM 断点：set_breakpoint('dom', '#login-button')
- 函数断点：set_breakpoint('function', 'handleLogin')
- 行断点：set_breakpoint('line', 'app.js:42')
- XHR 断点：set_breakpoint('xhr', '/api/login')
- 日志断点：set_breakpoint('function', 'processData', {'logMessage': 'Processing data...', 'pause': False})
- 条件日志断点：set_breakpoint('function', 'validate', {'condition': 'value < 0', 'logMessage': 'Invalid value', 'pause': False})

- scripts: 脚本列表，包含 scriptId、url、startLine、endLine
- count: 脚本总数

- script_id(str): 脚本 ID（从 get_script_sources 获取）

- pattern(str): 搜索模式（如函数名、类名、文本）
- search_type(str): 搜索类型 - 'function'、'class'、'variable'、'text'
- 确保 Chrome 已安装
- 检查端口 9222 是否被占用：

lsof -i :9222 # macOS/Linux netstat -an | findstr 9222 # Windows

- 确保 MCP 服务器正在运行
- 检查配置文件路径是否正确
- 重启 Claude Code 或 Cursor

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Official Chrome DevTools MCP server for controlling and inspecting a live Chrome browser from coding agents such as Gemini, Claude, Cursor, and Copilot.

Live browser debugging for AI assistants — DOM, console, network via MCP.

Debug web applications by connecting to Chrome's developer tools via the Chrome DevTools Protocol.

Chrome DevTools Session MCP is a paid remote MCP endpoint for AI agent browser DevTools MCP. It exposes structured JSON tools, a public server card, token-based access, usage receipts, and a

Model Context Protocol server for Firefox DevTools - enables AI assistants to inspect and control Firefox browser through the Remote Debugging Protocol

About MCP server for native computer use and browser automation.

Browser automation via MCP for Chrome and Firefox

Bring the full power of BrowserStack’s Test Platform to your AI tools, making testing faster and easier for every developer and tester on your team.

Open-source self-hostable MCP server with ~1,100 deterministic tools (web search, headless Chromium, PDFs, OCR, images, ~1,040 CPU utilities). Free to self-host or pay per call via x402 (USDC on Base).

A toolkit for autonomous agent development with tools for task management, filesystem operations, browser automation, and terminal control.