Chrome DevTools MCP 完整指南3 分钟让 AI 编程助手操控真实 Chrome 浏览器【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp想让 AI 助手打开页面、看看控制台、量一下性能它却只能纸上谈兵Chrome DevTools MCP包名chrome-devtools-mcp就是为了解决这件事它作为一个 MCP模型上下文协议服务器把你的编码助手——Claude、Cursor、Copilot 这些——接到一个真实运行的 Chrome 上由 Puppeteer 驱动页面操作再由 Chrome DevTools 提供性能追踪、网络与控制台检查能力。除了 MCP它还附带一个实验性终端 CLI不装 MCP 也能用。先说清楚它能替你省掉哪些时间性能结论直接给。基于 Chrome DevTools 录制 trace再从中提炼出可执行的优化建议而不只是甩给你一堆原始数据。深度排错。分析网络请求、截图取证、读取控制台消息且堆栈会做 source-map 还原直接对应到你的源码位置。自动化不跑飞。所有操作走 Puppeteer 并自动等待结果返回动作稳定适合让 AI 连续执行多步流程。3 分钟接入一份 JSON 就能配完环境要求三样东西Node.jsLTS 版本Chrome当前 stable 或更新的版本npm把这段配置贴进你的 MCP 客户端{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }latest保证客户端始终用最新版服务器-y让 npx 自动接受安装询问不用手动确认。 注意连上服务器本身不会启动浏览器。只有当助手第一次调用需要浏览器的工具时浏览器才会被拉起。用一句话验证是否接成功在客户端输入Check the performance of https://developers.chrome.com一切正常的表现是客户端自动打开浏览器、录制一段性能 trace然后回传分析报告。你手上的客户端能接吗以下 10 个主流客户端都有官方说明正文用同一份标准 JSON 即可VS Code、Cursor 也提供一键安装入口Gemini CLI/Gemini Code AssistClaude Code/AntigravityCursor/CopilotVS Code/Visual StudioWarp/WindsurfREADME 里其实给了 25 份客户端配置还包括 Amp、Bob、Cline、Codex、Devin、Factory、Grok、JetBrains AI Assistant / Junie、Kiro、OpenCode、Qoder 等。几种有代表性的接法Claude Code一行命令装完claude mcp add chrome-devtools --scope user npx chrome-devtools-mcplatestVS Code / Copilot打开命令面板CtrlShiftP执行Chat: Install Plugin From Source粘贴仓库名——MCP 服务器和技能skills一次配齐CursorCursor Settings → MCP → New MCP Server粘贴标准配置Antigravity加--browser-urlhttp://127.0.0.1:9222接它内置的浏览器需先点右上角 Chrome 图标把浏览器开起来端口不是 9222 就自行改能力全景按你的场景找工具完整说明见 工具参考。不按类别罗列按什么时候用来分场景一替人点按、填写、上传输入自动化工具click、fill、press_key、upload_file外加type_text、hover、drag、fill_form、handle_dialog、click_at。配合take_snapshot抓取页面结构并给元素编号助手先看懂页面再动手不靠猜坐标。场景二多标签页并行、多会话不串台导航自动化6 个new_page、navigate_page、list_pages、select_page、close_page、wait_for。默认开启--pageIdRouting页面级工具必须带pageId两个 agent 共用一个服务器实例时各操作各的标签页。场景三找出页面到底慢在哪性能工具3 个performance_start_trace、performance_stop_trace、performance_analyze_insight最后一步负责把 trace 翻译成结论。trace 还能附带 Google CrUX 的真实用户数据把实验室 线上放进同一份报告不想要就把 URL 外发关掉--no-performance-crux。场景四定位报错、复现问题调试8 个list_console_messages、get_console_message、evaluate_script、take_screenshot、take_snapshot、lighthouse_audit以及录屏用的screencast_start/screencast_stop录屏需 ffmpeg 并开启--experimentalScreencast网络2 个list_network_requests、get_network_request内存13 个需--memoryDebuggingtake_heapsnapshot、compare_heapsnapshot及一组get_heapsnapshot_*专查内存泄漏模拟2 个emulate、resize_page切设备与视口场景五更垂直的工具箱扩展5 个--categoryExtensions、PWA4 个--categoryPwa、WebMCP2 个需 Chrome 150 且加--enable-featuresWebMCP、第三方开发者工具2 个--categoryExperimentalThirdParty。只要基础浏览能力加--slim顺手带上--headless只暴露 3 个工具导航、执行脚本、截图详见 Slim 工具参考。stable / canary / beta / dev四种 Chrome 版本怎么挑--channel参数决定服务器用哪个版本的 Chrome 启动通道定位什么时候选它stable稳定版默认绝大多数情况装完即用canary金丝雀验证最新特性、最新 DevTools 行为beta测试版想领先 stable 一步但不想太激进dev开发版跟随 Chromium 开发节奏每个通道有独立的用户数据目录默认是$HOME/.cache/chrome-devtools-mcp/chrome-profileWindows 为%USERPROFILE%\.cache\chrome-devtools-mcp\chrome-profile非 stable 通道会追加后缀例如chrome-profile-canary。这个目录多次运行之间不会清理登录态和 cookie 会一直保留。进阶调优复用登录态、隔离实例、压缩截图连上你正在用的那个 Chrome而不是新开一个这三种情况尤其需要手动测试与 agent 测试来回切换、想保留同一份应用状态网站检测到 WebDriver 控制就拒绝登录LLM 跑在沙箱里而 Chrome 在沙箱外。方式关键参数适用情况自动连接--autoConnectChrome 144需先在chrome://inspect/#remote-debugging开启远程调试HTTP 调试端口--browserUrlhttp://127.0.0.1:9222短写-u沙箱环境、虚拟机到宿主机的端口转发WebSocket 直连--wsEndpointws://127.0.0.1:9222/devtools/browser/id短写-w需要自定义认证头时配--wsHeaders端点可从http://127.0.0.1:9222/json/version的webSocketDebuggerUrl字段拿到手动带调试端口启动 Chrome 时Chrome 出于安全要求必须指定一个非默认的--user-data-dir别用你日常浏览的 profile。常用启动参数速查参数解决什么问题--headless无窗口运行适合 CI 和服务器--isolated用临时 profile关浏览器后自动清理多实例互不干扰--viewport1280x720初始视口尺寸headless 下最大 3840x2160--executablePath指定自定义 Chrome 可执行文件--proxyServer让 Chrome 走代理--screenshotFormatjpeg/--screenshotMaxWidth压缩截图体积省上下文JPEG/WebP 比 PNG 小约 3-5 倍--blockedUrlPattern/--allowedUrlPattern给浏览器网络访问加黑名单/白名单--no-usage-statistics关闭使用统计设置CI或CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS环境变量也会自动关闭全量参数随时跑npx chrome-devtools-mcplatest --help查看。不想接 MCP终端里直接跑实验性 CLInpm i chrome-devtools-mcplatest -g chrome-devtools statusCLI 背后是一个常驻守护进程Linux/Mac 走 Unix socketWindows 走命名管道第一次调用工具时自动把 MCP 服务器和浏览器拉起来之后的命令复用同一实例打开的页面、cookie 都还在headless 与 isolated 默认开启。start/stop/status可以手动管理后台进程。chrome-devtools navigate_page 1 --url https://google.com chrome-devtools take_screenshot 1 --filePath screenshot.png chrome-devtools stop更多用法见 CLI 文档。连接失败4 类常见报错的排查法服务器根本起不来先手动跑npx chrome-devtools-mcplatest --help。连 help 都打不出来就是环境问题——重点检查 MCP 客户端和终端是不是用的同一个 npm / Node 版本。ERR_MODULE_NOT_FOUND通常是 Node 版本不受支持或 npx 缓存损坏。清理后重装rm -rf ~/.npm/_npx再npm cache clean --force。Target closed意思是浏览器没启动成功。关掉所有正在运行的 Chrome 实例确认装的是最新 stable。Windows 报MCP error -32000: Connection closed用cmd包一层 npx——command: cmdargs: [/c, npx, -y, chrome-devtools-mcplatest]。另有两个高频环境WSL里要么直接在 WSL 安装 Chrome要么用 Mirrored 网络 --browser-url连 Windows 侧的 Chrome客户端开了Seatbelt/容器沙箱时要么给这个服务器关沙箱要么用--browser-url连到沙箱外手动启动的 Chrome。逐条详解在 排错文档。想看清服务器内部在干什么设DEBUG*并加--logFile/path/to/chrome-devtools-mcp.logIDE 用户的日志一般就在 Output 面板里。 安全边界两件事必须知道浏览器里能看到的内容MCP 客户端也看得到。该服务器把浏览器实例的内容暴露给客户端客户端可以检查、调试甚至修改浏览器里的任何数据。不要把敏感个人信息放进这个浏览器实例。远程调试端口等于一扇开着的门。开启 9222 端口后本机的任何程序都能连接并控制这个浏览器——端口开着的时候别浏览敏感网站。还有两条官方口径Chrome DevTools MCP 官方只支持 Google Chrome 和 Chrome for Testing其他 Chromium 系浏览器可能能用但不保证服务器会定期查 npm 是否有新版本并打印提示介意可设CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS环境变量关闭。上手清单核对环境Node.js LTS 最新 stable Chrome npm把标准 JSON 贴进 MCP 客户端只需要基础浏览就加--slim --headless用Check the performance of https://developers.chrome.com验证要复用登录态就从--autoConnect或--browserUrl里选一种接法出问题先跑--help再翻 排错文档现在就打开你的 MCP 客户端输入帮我看看这个页面为什么慢——浏览器自己会打开、自己录 trace然后回来给你一份分析。想深入调参或逐个研究工具工具参考 和 README 随时可以翻。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Chrome DevTools MCP 完整指南：3 分钟让 AI 编程助手操控真实 Chrome 浏览器
Chrome DevTools MCP 完整指南3 分钟让 AI 编程助手操控真实 Chrome 浏览器【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp想让 AI 助手打开页面、看看控制台、量一下性能它却只能纸上谈兵Chrome DevTools MCP包名chrome-devtools-mcp就是为了解决这件事它作为一个 MCP模型上下文协议服务器把你的编码助手——Claude、Cursor、Copilot 这些——接到一个真实运行的 Chrome 上由 Puppeteer 驱动页面操作再由 Chrome DevTools 提供性能追踪、网络与控制台检查能力。除了 MCP它还附带一个实验性终端 CLI不装 MCP 也能用。先说清楚它能替你省掉哪些时间性能结论直接给。基于 Chrome DevTools 录制 trace再从中提炼出可执行的优化建议而不只是甩给你一堆原始数据。深度排错。分析网络请求、截图取证、读取控制台消息且堆栈会做 source-map 还原直接对应到你的源码位置。自动化不跑飞。所有操作走 Puppeteer 并自动等待结果返回动作稳定适合让 AI 连续执行多步流程。3 分钟接入一份 JSON 就能配完环境要求三样东西Node.jsLTS 版本Chrome当前 stable 或更新的版本npm把这段配置贴进你的 MCP 客户端{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }latest保证客户端始终用最新版服务器-y让 npx 自动接受安装询问不用手动确认。 注意连上服务器本身不会启动浏览器。只有当助手第一次调用需要浏览器的工具时浏览器才会被拉起。用一句话验证是否接成功在客户端输入Check the performance of https://developers.chrome.com一切正常的表现是客户端自动打开浏览器、录制一段性能 trace然后回传分析报告。你手上的客户端能接吗以下 10 个主流客户端都有官方说明正文用同一份标准 JSON 即可VS Code、Cursor 也提供一键安装入口Gemini CLI/Gemini Code AssistClaude Code/AntigravityCursor/CopilotVS Code/Visual StudioWarp/WindsurfREADME 里其实给了 25 份客户端配置还包括 Amp、Bob、Cline、Codex、Devin、Factory、Grok、JetBrains AI Assistant / Junie、Kiro、OpenCode、Qoder 等。几种有代表性的接法Claude Code一行命令装完claude mcp add chrome-devtools --scope user npx chrome-devtools-mcplatestVS Code / Copilot打开命令面板CtrlShiftP执行Chat: Install Plugin From Source粘贴仓库名——MCP 服务器和技能skills一次配齐CursorCursor Settings → MCP → New MCP Server粘贴标准配置Antigravity加--browser-urlhttp://127.0.0.1:9222接它内置的浏览器需先点右上角 Chrome 图标把浏览器开起来端口不是 9222 就自行改能力全景按你的场景找工具完整说明见 工具参考。不按类别罗列按什么时候用来分场景一替人点按、填写、上传输入自动化工具click、fill、press_key、upload_file外加type_text、hover、drag、fill_form、handle_dialog、click_at。配合take_snapshot抓取页面结构并给元素编号助手先看懂页面再动手不靠猜坐标。场景二多标签页并行、多会话不串台导航自动化6 个new_page、navigate_page、list_pages、select_page、close_page、wait_for。默认开启--pageIdRouting页面级工具必须带pageId两个 agent 共用一个服务器实例时各操作各的标签页。场景三找出页面到底慢在哪性能工具3 个performance_start_trace、performance_stop_trace、performance_analyze_insight最后一步负责把 trace 翻译成结论。trace 还能附带 Google CrUX 的真实用户数据把实验室 线上放进同一份报告不想要就把 URL 外发关掉--no-performance-crux。场景四定位报错、复现问题调试8 个list_console_messages、get_console_message、evaluate_script、take_screenshot、take_snapshot、lighthouse_audit以及录屏用的screencast_start/screencast_stop录屏需 ffmpeg 并开启--experimentalScreencast网络2 个list_network_requests、get_network_request内存13 个需--memoryDebuggingtake_heapsnapshot、compare_heapsnapshot及一组get_heapsnapshot_*专查内存泄漏模拟2 个emulate、resize_page切设备与视口场景五更垂直的工具箱扩展5 个--categoryExtensions、PWA4 个--categoryPwa、WebMCP2 个需 Chrome 150 且加--enable-featuresWebMCP、第三方开发者工具2 个--categoryExperimentalThirdParty。只要基础浏览能力加--slim顺手带上--headless只暴露 3 个工具导航、执行脚本、截图详见 Slim 工具参考。stable / canary / beta / dev四种 Chrome 版本怎么挑--channel参数决定服务器用哪个版本的 Chrome 启动通道定位什么时候选它stable稳定版默认绝大多数情况装完即用canary金丝雀验证最新特性、最新 DevTools 行为beta测试版想领先 stable 一步但不想太激进dev开发版跟随 Chromium 开发节奏每个通道有独立的用户数据目录默认是$HOME/.cache/chrome-devtools-mcp/chrome-profileWindows 为%USERPROFILE%\.cache\chrome-devtools-mcp\chrome-profile非 stable 通道会追加后缀例如chrome-profile-canary。这个目录多次运行之间不会清理登录态和 cookie 会一直保留。进阶调优复用登录态、隔离实例、压缩截图连上你正在用的那个 Chrome而不是新开一个这三种情况尤其需要手动测试与 agent 测试来回切换、想保留同一份应用状态网站检测到 WebDriver 控制就拒绝登录LLM 跑在沙箱里而 Chrome 在沙箱外。方式关键参数适用情况自动连接--autoConnectChrome 144需先在chrome://inspect/#remote-debugging开启远程调试HTTP 调试端口--browserUrlhttp://127.0.0.1:9222短写-u沙箱环境、虚拟机到宿主机的端口转发WebSocket 直连--wsEndpointws://127.0.0.1:9222/devtools/browser/id短写-w需要自定义认证头时配--wsHeaders端点可从http://127.0.0.1:9222/json/version的webSocketDebuggerUrl字段拿到手动带调试端口启动 Chrome 时Chrome 出于安全要求必须指定一个非默认的--user-data-dir别用你日常浏览的 profile。常用启动参数速查参数解决什么问题--headless无窗口运行适合 CI 和服务器--isolated用临时 profile关浏览器后自动清理多实例互不干扰--viewport1280x720初始视口尺寸headless 下最大 3840x2160--executablePath指定自定义 Chrome 可执行文件--proxyServer让 Chrome 走代理--screenshotFormatjpeg/--screenshotMaxWidth压缩截图体积省上下文JPEG/WebP 比 PNG 小约 3-5 倍--blockedUrlPattern/--allowedUrlPattern给浏览器网络访问加黑名单/白名单--no-usage-statistics关闭使用统计设置CI或CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS环境变量也会自动关闭全量参数随时跑npx chrome-devtools-mcplatest --help查看。不想接 MCP终端里直接跑实验性 CLInpm i chrome-devtools-mcplatest -g chrome-devtools statusCLI 背后是一个常驻守护进程Linux/Mac 走 Unix socketWindows 走命名管道第一次调用工具时自动把 MCP 服务器和浏览器拉起来之后的命令复用同一实例打开的页面、cookie 都还在headless 与 isolated 默认开启。start/stop/status可以手动管理后台进程。chrome-devtools navigate_page 1 --url https://google.com chrome-devtools take_screenshot 1 --filePath screenshot.png chrome-devtools stop更多用法见 CLI 文档。连接失败4 类常见报错的排查法服务器根本起不来先手动跑npx chrome-devtools-mcplatest --help。连 help 都打不出来就是环境问题——重点检查 MCP 客户端和终端是不是用的同一个 npm / Node 版本。ERR_MODULE_NOT_FOUND通常是 Node 版本不受支持或 npx 缓存损坏。清理后重装rm -rf ~/.npm/_npx再npm cache clean --force。Target closed意思是浏览器没启动成功。关掉所有正在运行的 Chrome 实例确认装的是最新 stable。Windows 报MCP error -32000: Connection closed用cmd包一层 npx——command: cmdargs: [/c, npx, -y, chrome-devtools-mcplatest]。另有两个高频环境WSL里要么直接在 WSL 安装 Chrome要么用 Mirrored 网络 --browser-url连 Windows 侧的 Chrome客户端开了Seatbelt/容器沙箱时要么给这个服务器关沙箱要么用--browser-url连到沙箱外手动启动的 Chrome。逐条详解在 排错文档。想看清服务器内部在干什么设DEBUG*并加--logFile/path/to/chrome-devtools-mcp.logIDE 用户的日志一般就在 Output 面板里。 安全边界两件事必须知道浏览器里能看到的内容MCP 客户端也看得到。该服务器把浏览器实例的内容暴露给客户端客户端可以检查、调试甚至修改浏览器里的任何数据。不要把敏感个人信息放进这个浏览器实例。远程调试端口等于一扇开着的门。开启 9222 端口后本机的任何程序都能连接并控制这个浏览器——端口开着的时候别浏览敏感网站。还有两条官方口径Chrome DevTools MCP 官方只支持 Google Chrome 和 Chrome for Testing其他 Chromium 系浏览器可能能用但不保证服务器会定期查 npm 是否有新版本并打印提示介意可设CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS环境变量关闭。上手清单核对环境Node.js LTS 最新 stable Chrome npm把标准 JSON 贴进 MCP 客户端只需要基础浏览就加--slim --headless用Check the performance of https://developers.chrome.com验证要复用登录态就从--autoConnect或--browserUrl里选一种接法出问题先跑--help再翻 排错文档现在就打开你的 MCP 客户端输入帮我看看这个页面为什么慢——浏览器自己会打开、自己录 trace然后回来给你一份分析。想深入调参或逐个研究工具工具参考 和 README 随时可以翻。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考