写过浏览器自动化脚本的朋友，估计都和 Selenium 或 Puppeteer 的 CSS 选择器搏斗过。有时候，一个微小的前端改动，就能让整个脚本挂掉，维护起来相当头疼。如果我们能直接用大白话告诉浏览器“点一下那个登录按钮”，然后它就照做，那该多好？
Chrome DevTools 团队推出的 MCP (Model Context Protocol) 服务器，就把这个想法变成了现实。它像一个翻译官，把你用自然语言下达的指令，转换成浏览器能听懂的自动化操作。这背后由 Puppeteer 驱动，整个过程都在你自己的机器上运行，安全又可靠。
这篇文章，我们就来聊聊怎么把这个工具用起来，看看它如何通过对话的方式，帮你搞定浏览器自动化、调试，甚至辅助前端开发。
Chrome DevTools MCP 是个什么东西？
简单来说，Chrome DevTools MCP 是一个本地服务，它为你的 AI 编码助手（比如 Claude、Cursor 等）提供了一套控制 Chrome 浏览器的工具集。当你对 AI 助手说“打开某个网站并截图”时，助手会调用 MCP 服务器提供的 navigate_page 和 take_screenshot 工具来完成这个任务。
它内置了 26 个工具，覆盖了六大类操作：
- 输入自动化:
click、fill_form、hover等。 - 导航:
navigate_page、new_page、close_page等。 - 调试:
evaluate_script、list_console_messages、take_screenshot等。 - 网络:
list_network_requests、get_network_request。 - 性能: 性能追踪与分析相关工具。
- 模拟: 模拟不同的 CPU、网络环境或页面尺寸。
有了这些工具，你就能用聊天的方式完成很多之前需要写代码才能做的事情，比如：
- 端到端测试用户流程：模拟用户注册、登录、浏览、下单等完整操作。
- 快速调试：不用手动打开 DevTools，直接问 AI “页面有没有报错？”，它会帮你检查控制台和网络请求。
- 迭代式构建前端：让 AI 写完一段代码后，自己截图检查 UI 效果，然后继续修改。
- 网页数据提取：在页面上执行 JavaScript 脚本，抓取你需要的信息。
安装与设置
上手过程很简单，你只需要准备：
- Node.js (v20.19 或更高版本) 和 npm。
- 一个支持 MCP 的 AI 编程助手，这里我们以 Claude Code 为例。
- Chrome 浏览器（Puppeteer 会自动处理，无需额外配置）。
如果你用的是 Claude Code，直接在终端里运行下面这行命令就行：
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
这行命令会把 Chrome DevTools MCP 注册到 Claude Code 中。npx 会自动下载并运行最新的包，非常方便。搞定之后，重启一下你的 AI 助手，让配置生效。
如果你用的是 Cursor、Cline 或其他工具，安装方式大同小异，具体可以参考 Chrome DevTools MCP 的 GitHub 页面上的说明。
装好后，我们来测试一下。对你的 AI 助手说：
导航到 demo.realworld.io 并截个图
如果一切顺利，你会看到 Chrome 浏览器被自动打开，加载了指定的网页，然后 AI 助手会给你展示一张截图。
核心功能实战
接下来，我们通过一些实际操作，看看这个工具到底有多好用。我们会用一个叫 Conduit (demo.realworld.io) 的演示网站来做实验。
基础浏览器自动化：告别选择器
过去，我们要点击一个链接，得先找到它的 ID 或者 XPath。现在，直接说就行了。
打开 demo.realworld.io
AI 会调用 navigate_page 工具，加载页面。
接着，我们来交互一下：
点击 “Sign in” 链接
AI 会自动定位并点击这个元素，跳转到登录页。
填表单也一样简单，你可以一步步填，也可以一次性搞定。
用邮箱 test@example.com 和密码 testpass123 填写登录表单
AI 会调用 fill_form 工具，把信息填入对应的输入框。这整个过程，我们完全没碰过 HTML 代码。
在编辑器里直接调试
这可能是最实用的功能之一了。当页面出问题时，我们不用再切到浏览器里去翻控制台。
比如，Conduit 首页的文章列表和标签一直显示 “Loading…"。
我们可以直接问 AI：
检查一下当前页面的控制台有什么错误
AI 会使用 list_console_messages 工具，很快就找到了问题所在：
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
原来是 CORS（跨域资源共享）策略阻止了 API 请求。这个发现过程几乎是瞬时的。
控制台的错误通常和网络请求有关，我们可以继续深挖：
看看这个页面有哪些失败的网络请求？
AI 会调用 list_network_requests，然后告诉你：“有四个 API 请求失败了，其中两个是 307 重定向，另外两个直接报错 ERR_FAILED。”这在个场景下，问题定位就非常快了。
动态执行 JS 提取数据
evaluate_script 工具让你可以在当前页面上执行任意 JavaScript 代码。这对于数据提取或者检查页面状态非常有用。
看看首页上显示了多少篇文章
AI 会在后台运行一小段 JS：
const articles = document.querySelectorAll('.article-preview');
return articles.length;
然后返回结果：“页面上显示了 0 篇文章。看起来是 API 错误导致内容没有加载出来。”
你甚至可以提取更复杂的结构化数据：
获取页面标题和主标题的文本
AI 会执行：
return {
pageTitle: document.title,
mainHeading: document.querySelector('h1')?.textContent
};
返回结果：{pageTitle: "Home — Conduit", mainHeading: "conduit"}。
实战：让 AI 自己构建并测试前端界面
AI 助手能写代码，但它们是“盲人”，看不到自己写的界面长什么样。通常我们需要手动截图，再把图片发给它，让它调整。
有了 Chrome DevTools MCP，这个循环就可以被打破。AI 可以自己写代码、自己运行、自己截图、自己检查、自己修改。
我们来试试让它构建一个基于 Streamlit 的 ChatGPT 克隆版。
用 Streamlit 构建一个 ChatGPT 克隆应用。界面要简洁，包含消息历史、文本输入框和 OpenAI API 集成。侧边栏需要有 API 密钥管理和聊天管理功能（如清空对话、新建对话）。在每一步都使用 Chrome DevTools MCP 来验证 UI。
AI 开始工作后，它会先创建一个带侧边栏的基础应用，然后立刻调用 take_screenshot 检查布局。
接着，它会测试聊天功能是否正常。
然后测试多轮对话的上下文记忆能力。
最后，它会通过 click 工具测试“清空对话”按钮的功能，并再次截图确认界面已重置。这整个过程，AI 就像一个真正的开发者一样，有自己的视觉反馈闭环，而我们只需要下达最初的指令。这的的却却改变了我们和AI协作的方式。
总结与展望
Chrome DevTools MCP 把浏览器自动化从繁琐的脚本编写，变成了一场自然的对话。
你可以从一些简单的任务开始尝试，比如让它帮你检查正在开发的网站有没有控制台报错，或者自动填充一些日常需要登录的表单。
当你熟练之后，可以尝试更复杂的组合任务：导航到页面 -> 填写表单 -> 提交 -> 截图确认结果 -> 检查网络请求是否成功。甚至可以利用性能分析和设备模拟工具，来测试你的网站在不同条件下的表现。
这只是一个开始。当这种能力与其他 MCP 服务器（如文件系统、数据库访问）结合时，我们就能构建出跨越多个系统的、真正强大的自动化工作流。
关于
关注我获取更多资讯
