Chrome DevTools MCP Server for AI-assisted frontend development
If you already use Chrome Devtool MCP, the chrome devtool mcp mcp server is the piece that lets your assistant work with it directly. Chrome DevTools MCP Server for AI-assisted frontend development.
一个基于 Model Context Protocol (MCP) 的 Chrome DevTools 控制服务器，为 AI 辅助前端开发提供强大的浏览器调试能力。
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
launch_chrome — 参数： - headless (bool): 是否无头模式运行，默认 false - port (int): 远程调试端口，默认 9222connect_remote_chrome — 参数： - host (str): 远程主机地址，默认 localhost - port (int): 远程调试端口，默认 9222connect_websocket_url — 参数： - ws_url (str): WebSocket 调试器 URL，如 'ws://localhost:9222/devtools/page/ABC123'list_available_targets — 参数： - host (str): Chrome 主机地址，默认 localhost - port (int): Chrome 调试端口，默认 9222navigate_to — The navigate_to tool exposed by this serverget_dom_tree — The get_dom_tree tool exposed by this serverquery_elements — The query_elements tool exposed by this serverget_network_logs — The get_network_logs tool exposed by this serverget_console_logs — 参数： - level (str, optional): 日志级别过滤（error, warning, log, info）execute_javascript — The execute_javascript tool exposed by this servertake_screenshot — The take_screenshot tool exposed by this serverget_page_info — The get_page_info tool exposed by this serverSetup follows the usual MCP pattern — install or clone the server, register it in your client's configuration file, restart the client. The configuration blocks on this page cover the common clients.
Configuration is passed through the environment: MCP_PORT, MCP_HOST, CLAUDE_MCP_CHROME_DEVTOOLS. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
Among the browser automation options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. Chrome Devtool MCP's toolset — launch_chrome, connect_remote_chrome, connect_websocket_url and 11 more — is a fair guide to whether it matches your workflow. It is maintained by XRealSys; worth a glance at recent repository activity before you build anything load-bearing on it.
SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.
| Tool | What it does |
|---|---|
| launch_chrome | 参数： - headless (bool): 是否无头模式运行，默认 false - port (int): 远程调试端口，默认 9222 |
| connect_remote_chrome | 参数： - host (str): 远程主机地址，默认 localhost - port (int): 远程调试端口，默认 9222 |
| connect_websocket_url | 参数： - ws_url (str): WebSocket 调试器 URL，如 'ws://localhost:9222/devtools/page/ABC123' |
| list_available_targets | 参数： - host (str): Chrome 主机地址，默认 localhost - port (int): Chrome 调试端口，默认 9222 |
| navigate_to | The navigate_to tool exposed by this server. |
| get_dom_tree | The get_dom_tree tool exposed by this server. |
| query_elements | The query_elements tool exposed by this server. |
| get_network_logs | The get_network_logs tool exposed by this server. |
| get_console_logs | 参数： - level (str, optional): 日志级别过滤（error, warning, log, info） |
| execute_javascript | The execute_javascript tool exposed by this server. |
| take_screenshot | The take_screenshot tool exposed by this server. |
| get_page_info | The get_page_info tool exposed by this server. |
| close_chrome | The close_chrome tool exposed by this server. |
| set_breakpoint | 参数： - breakpoint_type (str): 断点类型 - 'dom', 'event', 'function', 'xhr', 'line', 'logpoint' - target (str): 断点目标（如 DOM 选择器、函数名、URL:行号） - options (dict, optional): 额外选项 - condition: 条件表达式，只在条件为真时触发 - logMessage: 日志消息（用于日志断点 |
{
"mcpServers": {
"chrome-devtools": {
"command": "python",
"args": ["/path/to/chrome-devtool-mcp/mcp_server.py"],
"env": {}
}
}
}Configuration as documented by the project. Restart the client after saving.
| Variable | Description | Required |
|---|---|---|
| MCP_PORT | Configuration value read at startup. | Optional |
| MCP_HOST | Endpoint or connection string the server talks to. | Optional |
| CLAUDE_MCP_CHROME_DEVTOOLS | Configuration value read at startup. | Optional |
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.