3步让 AI 替你操控 ChromeChrome DevTools MCP 完整上手指南【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpChrome DevTools MCP 是一个 MCP 服务器把 Chrome 变成 AI 编程助手能直接操控和检查的工具。配好之后Claude、Cursor、Copilot 这类助手可以替你打开页面、填表单、抓网络请求、跑性能分析。适合想给 AI 装上一双能摸网页的手的开发者以及不想手动开开发者工具的新手。一图看懂它是什么先解释一个词MCPModel Context Protocol模型上下文协议是让 AI 助手调用外部工具的标准接口就像 USB 口——设备插上就被识别不用额外接线。chrome-devtools-mcp 就是插进这个口的 Chrome 设备。打个比方AI 助手是大脑Chrome 是身体这个服务器是连接两者的神经。AI 看到的和你用浏览器看到的一样AI 做的操作和你手点鼠标点出来的一样。问题答案它是什么让 AI 助手控制并检查一个正在运行的 Chrome 的 MCP 服务器能替你做什么开页面、点击填表、抓网络请求、录性能数据并分析、读控制台报错底层靠什么Chrome DevTools 协议 Puppeteer 自动化操作会自动等待结果适合谁用 AI 编程助手调试网页、写自动化测试的人三分钟跑起来 第 1 步确认三样东西都在需要 Node.jsLTS 版本、npm、最新版 Google Chrome。这个工具官方只保证 Google Chrome 和 Chrome for Testing 可用其他 Chromium 内核浏览器可能能跑但不保证不出问题。第 2 步把配置交给 AI 客户端在你的 MCP 客户端VS Code、Cursor、Gemini CLI 等README 里列了几十种客户端各自的添加方式里加上这段基础配置{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }latest保证每次都用最新版-y让 npx 跳过安装确认。第 3 步先验证服务器本身能跑在终端里跑这条命令看到帮助输出就说明服务器在你机器上没问题npx chrome-devtools-mcplatest --help然后回到 AI 客户端输入 README 推荐的第一句验证指令Check the performance of https://developers.chrome.com跑通后你应该看到浏览器自动弹出来打开这个页面AI 录下一次性能 trace最后把分析结果发回来。注意一点服务器只在有工具需要浏览器时才启动它光连上服务器不会自动开浏览器别以为没反应就是坏了。它能替你干的活页面慢到底慢在哪平时得自己开 DevTools 的 Performance 面板读火焰图。现在直接对 AI 说分析这个页面的性能它会用performance_start_trace开始录、performance_stop_trace收尾再用performance_analyze_insight把数据翻成可执行的建议想跑 Lighthouse 评分还有lighthouse_audit。报错一闪而过抓不到现场list_console_messages把控制台消息拉出来堆栈带源码映射不用对着压缩后的行号猜。take_screenshot截图、take_snapshot存页面结构快照问题发生那一刻的现场就留下来了。登录流程要点十几下想让它自动跑fill_form一次填完整个表单账号、密码、记住我一并处理click负责点按钮wait_for负责等内容出现。底层是 Puppeteer操作会自动等待结果不容易踩页面还没加载完就点了的坑。哪个接口挂了肉眼看不出来list_network_requests列出所有网络请求get_network_request钻进任意一条看请求头、响应体和耗时让 AI 自己翻翻出哪条不对劲再告诉你。全部工具的名字和参数在 docs/tool-reference.md。不想要 MCP 客户端也行同一个包带了命令行版全局安装后用chrome-devtools status、chrome-devtools list_pages直接在终端操作细节见 docs/cli.md。跟着做一遍我打开配好 chrome-devtools-mcp 的客户端先问了一句打开 developers.chrome.com 并检查它的性能。浏览器窗口自己弹了出来页面开始加载。截图位 1这里放一张浏览器自动打开目标页面的画面AI 先用navigate_page把页面带到接着performance_start_trace开始录。页面稳定后它停止录制把报告发给我哪个阶段占时间、哪些资源值得优化一条条列清楚。我又追问了一句再看看控制台有没有报错。它跑list_console_messages这次是干净的如果有错堆栈带源码映射能直接定位回原始代码行。截图位 2这里放一张 AI 返回的性能分析结论整个过程我没碰过任何开发者工具面板只负责提问题。新手常见卡点现象浏览器起不来或者报Target closed。这说明浏览器没启动成功。先把所有已开的 Chrome 实例全关掉再试同时确认 Chrome 是最新稳定版。现象报ERR_MODULE_NOT_FOUND。通常是 Node 版本不受支持或者 npx 缓存损坏了。清缓存重装npm cache clean --force现象Windows 10 报MCP error -32000: Connection closed。把配置里的command从npx换成cmd参数加上/cmcpServers: { chrome-devtools: { command: cmd, args: [/c, npx, -y, chrome-devtools-mcplatest] } }还有一个通用排查法先在终端跑npx chrome-devtools-mcplatest --help服务器本身能跑问题就在客户端配置那一层。完整报错清单见 docs/troubleshooting.md。写在最后Chrome DevTools MCP 做的事其实很朴素给 AI 一只能真正操作、还能检查结果的浏览器。把它跑通之后不妨先问一句看看这个页面的性能——浏览器自己开起来数据自己回来后面的路就顺了。--headless、--isolated、--slim这些进阶参数README 的 Configuration 一节有完整列表。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 3步让 AI 替你操控 Chrome：Chrome DevTools MCP 完整上手指南
3步让 AI 替你操控 ChromeChrome DevTools MCP 完整上手指南【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpChrome DevTools MCP 是一个 MCP 服务器把 Chrome 变成 AI 编程助手能直接操控和检查的工具。配好之后Claude、Cursor、Copilot 这类助手可以替你打开页面、填表单、抓网络请求、跑性能分析。适合想给 AI 装上一双能摸网页的手的开发者以及不想手动开开发者工具的新手。一图看懂它是什么先解释一个词MCPModel Context Protocol模型上下文协议是让 AI 助手调用外部工具的标准接口就像 USB 口——设备插上就被识别不用额外接线。chrome-devtools-mcp 就是插进这个口的 Chrome 设备。打个比方AI 助手是大脑Chrome 是身体这个服务器是连接两者的神经。AI 看到的和你用浏览器看到的一样AI 做的操作和你手点鼠标点出来的一样。问题答案它是什么让 AI 助手控制并检查一个正在运行的 Chrome 的 MCP 服务器能替你做什么开页面、点击填表、抓网络请求、录性能数据并分析、读控制台报错底层靠什么Chrome DevTools 协议 Puppeteer 自动化操作会自动等待结果适合谁用 AI 编程助手调试网页、写自动化测试的人三分钟跑起来 第 1 步确认三样东西都在需要 Node.jsLTS 版本、npm、最新版 Google Chrome。这个工具官方只保证 Google Chrome 和 Chrome for Testing 可用其他 Chromium 内核浏览器可能能跑但不保证不出问题。第 2 步把配置交给 AI 客户端在你的 MCP 客户端VS Code、Cursor、Gemini CLI 等README 里列了几十种客户端各自的添加方式里加上这段基础配置{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }latest保证每次都用最新版-y让 npx 跳过安装确认。第 3 步先验证服务器本身能跑在终端里跑这条命令看到帮助输出就说明服务器在你机器上没问题npx chrome-devtools-mcplatest --help然后回到 AI 客户端输入 README 推荐的第一句验证指令Check the performance of https://developers.chrome.com跑通后你应该看到浏览器自动弹出来打开这个页面AI 录下一次性能 trace最后把分析结果发回来。注意一点服务器只在有工具需要浏览器时才启动它光连上服务器不会自动开浏览器别以为没反应就是坏了。它能替你干的活页面慢到底慢在哪平时得自己开 DevTools 的 Performance 面板读火焰图。现在直接对 AI 说分析这个页面的性能它会用performance_start_trace开始录、performance_stop_trace收尾再用performance_analyze_insight把数据翻成可执行的建议想跑 Lighthouse 评分还有lighthouse_audit。报错一闪而过抓不到现场list_console_messages把控制台消息拉出来堆栈带源码映射不用对着压缩后的行号猜。take_screenshot截图、take_snapshot存页面结构快照问题发生那一刻的现场就留下来了。登录流程要点十几下想让它自动跑fill_form一次填完整个表单账号、密码、记住我一并处理click负责点按钮wait_for负责等内容出现。底层是 Puppeteer操作会自动等待结果不容易踩页面还没加载完就点了的坑。哪个接口挂了肉眼看不出来list_network_requests列出所有网络请求get_network_request钻进任意一条看请求头、响应体和耗时让 AI 自己翻翻出哪条不对劲再告诉你。全部工具的名字和参数在 docs/tool-reference.md。不想要 MCP 客户端也行同一个包带了命令行版全局安装后用chrome-devtools status、chrome-devtools list_pages直接在终端操作细节见 docs/cli.md。跟着做一遍我打开配好 chrome-devtools-mcp 的客户端先问了一句打开 developers.chrome.com 并检查它的性能。浏览器窗口自己弹了出来页面开始加载。截图位 1这里放一张浏览器自动打开目标页面的画面AI 先用navigate_page把页面带到接着performance_start_trace开始录。页面稳定后它停止录制把报告发给我哪个阶段占时间、哪些资源值得优化一条条列清楚。我又追问了一句再看看控制台有没有报错。它跑list_console_messages这次是干净的如果有错堆栈带源码映射能直接定位回原始代码行。截图位 2这里放一张 AI 返回的性能分析结论整个过程我没碰过任何开发者工具面板只负责提问题。新手常见卡点现象浏览器起不来或者报Target closed。这说明浏览器没启动成功。先把所有已开的 Chrome 实例全关掉再试同时确认 Chrome 是最新稳定版。现象报ERR_MODULE_NOT_FOUND。通常是 Node 版本不受支持或者 npx 缓存损坏了。清缓存重装npm cache clean --force现象Windows 10 报MCP error -32000: Connection closed。把配置里的command从npx换成cmd参数加上/cmcpServers: { chrome-devtools: { command: cmd, args: [/c, npx, -y, chrome-devtools-mcplatest] } }还有一个通用排查法先在终端跑npx chrome-devtools-mcplatest --help服务器本身能跑问题就在客户端配置那一层。完整报错清单见 docs/troubleshooting.md。写在最后Chrome DevTools MCP 做的事其实很朴素给 AI 一只能真正操作、还能检查结果的浏览器。把它跑通之后不妨先问一句看看这个页面的性能——浏览器自己开起来数据自己回来后面的路就顺了。--headless、--isolated、--slim这些进阶参数README 的 Configuration 一节有完整列表。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考