Chrome DevTools MCP：由 AI 驱动的浏览器自动化与调试

若想更深入理解 AI 代理，以及像 Chrome DevTools MCP 这样的工具如何融入更大的生态，欢迎学习 DataCamp 的Introduction to AI Agents课程或AI Agent Fundamentals技能路径。

Chrome DevTools MCP 是来自 Chrome DevTools 团队的官方 Model Context Protocol 服务器，它让 AI 编程助手可以通过自然语言控制 Chrome。无需编写脚本，您只需告诉 AI 助手您的目标（例如“导航到这个页面并检查控制台错误”或“填写此表单并截屏”），它就会处理技术细节。

该服务器让您能够使用强大的浏览器自动化与调试工具。它基于 Puppeteer 构建，可靠且完全在本机运行。您无需编写任何 Puppeteer 代码。

在本教程中，您将学习如何将该 MCP 服务器与 Claude、Cursor 和 Cline 等 AI 编程助手配合使用。我们将先介绍安装与配置，然后进入核心能力：浏览器自动化、调试与检查。整个文章将以 Conduit（demo.realworld.io，一款类似 Medium 的博客平台）为例展示真实场景。

如果您是第一次接触 Model Context Protocol，建议先阅读这篇全面的 MCP 指南，深入了解 MCP 如何将 AI 模型与外部工具连接。您也可以查看我们的Chrome 版 Claude 教程以及最佳 AI 浏览器指南。若想了解另一种 AI 浏览器自动化思路，请参阅我们的ChatGPT Atlas教程。

要点速览

• Chrome DevTools MCP 是一款官方 MCP 服务器，让 AI 编程助手能用自然语言控制 Chrome

• 它提供 6 大类共 26 个工具：输入自动化、导航、调试、网络、性能与仿真

• 在 Claude Code 中使用 claude mcp add chrome-devtools npx chrome-devtools-mcp@latest 安装（其他客户端设置类似）

• 无需编写 Puppeteer 脚本，即可自动化完成导航、表单填写与截图等浏览器任务

• 通过对话完成 Web 应用调试：检查控制台错误、网络请求并运行 JavaScript

• 迭代式构建前端，让 AI 在每一步截屏自查以验证工作成效

什么是 Chrome DevTools MCP？

其底层架构大致如下所示。

该服务器按 6 大类别提供 26 个工具：

• 输入自动化（7 个工具）：click、drag、fill、fill_form、handle_dialog、hover、upload_file
• 导航（7 个工具）：navigate_page、new_page、list_pages、select_page、close_page、navigate_page_history、wait_for
• 调试（4 个工具）：evaluate_script、list_console_messages、take_screenshot、take_snapshot
• 网络（2 个工具）：list_network_requests、get_network_request
• 性能（3 个工具）：performance_start_trace、performance_stop_trace、performance_analyze_insight
• 仿真（3 个工具）：emulate_cpu、emulate_network、resize_page

浏览器自动化变得“可对话”。您无需编写 Puppeteer 脚本、也无需排查 CSS 选择器，只需用自然语言描述目标，AI 助手便能搞定技术细节。

Chrome DevTools MCP 与传统方法对比

借助这些工具，您的 AI 助手可以：

• 迭代构建前端，让代理在每一步截屏
• 端到端测试用户流程，如注册、在功能间导航并验证每一步是否正常
• 无需手动打开 DevTools，即可通过检查控制台错误与网络请求来调试问题
• 通过对不同页面或应用状态进行截图，自动化生成可视化文档
• 直接在页面上下文中运行 JavaScript，以提取网页数据

所有这一切都通过自然语言触发，而非编写 Puppeteer 脚本。

Chrome DevTools MCP 可配合 Claude Desktop、Cursor、Cline 和 VSCode Copilot 使用。由于它只是众多 MCP 服务器之一，您可以将其与其他服务器（如文件系统访问、数据库工具与 API）组合，构建跨多工具的工作流。

Chrome DevTools MCP 的安装与设置

您需要准备以下内容：

• 已在本机安装 Node.js 与 npm
• 一款兼容 MCP 的 AI 编程助手（本教程将使用Claude Code）
• Chrome 浏览器（由 Puppeteer 自动处理，无需额外配置）

熟悉浏览器 DevTools 会有帮助，但并非必需。

安装 Chrome DevTools MCP

Chrome DevTools MCP 通过您的 AI 助手的 MCP 配置运行。根据您使用的 AI 编程助手不同，设置略有差异。我们将演示在 Claude Code 中的安装方法，其他编辑器如 Cursor、Cline 与 VSCode Copilot 的方法类似。

在 Claude Code 中，请在终端运行以下命令：

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest技术支持

该命令会将 Chrome DevTools MCP 服务器注册到 Claude Code 中。服务器通过 npx 运行，这会在无需永久安装的情况下下载并执行该包。@latest 确保您获取到最新版本。

运行命令后，请重启 Claude Code 以加载新服务器。

使用其他 AI 编程助手时

其他 MCP 客户端的安装方法类似——有的使用命令，有的通过配置文件或“一键安装”按钮。请查看 Chrome DevTools MCP GitHub 页面，获取针对 Cursor、Cline、Gemini CLI、Windsurf 等受支持客户端的具体说明。

测试您的环境

让我们用一个简单的指令来验证一切正常：

Navigate to demo.realworld.io and take a screenshot技术支持

您应会看到：

• Chrome 被启动（除非您配置了无头模式，否则会看到浏览器窗口）
• Conduit 主页加载完成
• 您的 AI 助手捕获并展示一张截图

若出现问题，请检查以下常见原因：

• Node.js 版本：Chrome DevTools MCP 需要 Node.js v20.19 或更新版本
• npm 权限：确保 npm 能安装软件包
• 需要重启：配置变更后需重启您的 AI 助手
• 配置文件位置：确认您编辑的是该助手对应的正确 MCP 设置文件

浏览器自动化基础

Chrome DevTools MCP 为与网页交互提供了六个核心工具。使用 navigate_page 加载 URL，使用 click 进行元素交互，使用 fill 与 fill_form 输入文本，使用 hover 触发悬停效果，使用 take_screenshot 捕获当前所见。这些工具覆盖了大多数浏览器自动化任务。

导航与截图

我们来加载一个页面。请对您的 AI 助手说：

Navigate to demo.realworld.io技术支持

AI 将使用 navigate_page 工具，Chrome 打开，并加载 Conduit 主页。除非您配置了无头模式，否则您会看到浏览器窗口。

若要记录您所见，只需请求：

Take a screenshot of the homepage技术支持

AI 将使用 take_screenshot 捕获当前页面并展示结果。这对生成可视化文档或验证页面外观非常有用。

元素交互

无需编写 CSS 选择器或查看元素 ID，您就能与页面上任何元素交互。只要描述您的意图：

Click the Sign in link技术支持

AI 会识别您指的元素，并通过 click 工具完成点击。登录页将加载。

您也可以悬停在元素上：

Hover over the Sign up link技术支持

AI 使用 hover 工具。若存在工具提示或下拉菜单，它将出现。

表单填写

若用脚本来写，表单通常是浏览器自动化中最繁琐的部分。借助 Chrome DevTools MCP，您只需描述需要填写的内容。

Fill one field at a time:
Fill in the email field with [email protected]
Fill in the password field with testpass123
Or fill multiple fields at once:
Fill out the sign-in form with email [email protected] and password testpass123技术支持

AI 会使用 fill_form 一次性处理所有字段。下面是填写后的表单：

AI 会基于您的描述识别正确的输入字段。您无需接触 HTML。

调试与检查

Chrome DevTools MCP 提供三项核心调试工具：使用 list_console_messages 查看控制台输出，使用 list_network_requests 查看网络活动，使用 evaluate_script 运行 JavaScript 并从页面中提取数据。

通过 AI 助手调用这些工具，您就是在进行一场对话。您用自然语言提问，AI 在后台将其转译为 MCP 工具调用。

效果如下：

AI 助手理解您的意图，执行相应的 Chrome DevTools 工具，并以可读方式呈现结果。下面我们看看实际用法。

控制台检查

当出现故障时，通常先看控制台错误。无需手动打开 DevTools，只需对 AI 助手说：

Navigate to demo.realworld.io and check the console for any errors技术支持

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 错误（跨域资源共享——一种浏览器安全机制，会限制网页向不同域发起请求）解释了为何页面显示“Loading articles…”与“Loading tags…”而非实际内容：

您可以进一步请 AI 过滤并解读这些消息：

Are there any errors or warnings on this page?技术支持

AI 会分析控制台输出并告知您：“是的，有两条 CORS 错误，阻止了关于文章与标签的 API 请求。”

这样无需手动打开控制台就能立刻把握问题所在。

网络请求概览

控制台错误常常指向网络问题。要了解请求实际发生了什么，请查看网络活动：

Show me what network requests are made on the homepage技术支持

AI 将使用 list_network_requests 并返回所有请求列表。您会看到成功请求（CSS、字体、JavaScript 文件）与失败请求：

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]技术支持

继续追问以深入排查：

Are there any failed requests?技术支持

AI 会过滤列表并定位问题：“是的，有四个 API 请求失败。两个返回了 307 重定向，两个完全失败并报 ERR_FAILED 错误。”

这样您无需手动查看 Network 面板就能快速发现问题。

JavaScript 执行与数据提取

除了查看控制台与网络数据，您还可以在页面上直接运行代码来检查其状态或提取信息。为此可使用 evaluate_script：

Check if any articles are displayed on the homepage技术支持

AI 将运行 JavaScript 统计文章元素数量：

const articles = document.querySelectorAll('.article-preview');
return articles.length;技术支持

结果：“当前显示 0 篇文章。页面显示‘Loading articles…’，这表明 API 错误阻止了内容加载。”

您也可以提取更复杂的数据：

Get the page title and main heading text技术支持

AI 将评估：

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};技术支持

结果：{pageTitle: "Home — Conduit", mainHeading: "conduit"}

这能帮助您验证页面内容、提取结构化数据，或检查动态元素是否正确加载。take_screenshot 与 take_snapshot 工具在需要时可提供视觉与结构层面的文档补充。

这三种调试能力天然协作：先看控制台消息定位错误，再查网络请求了解失败原因，最后通过 JavaScript 执行验证这些失败如何影响页面。全程通过与 AI 助手的对话完成——无需在工具间来回切换或编写检查脚本。

使用 Chrome DevTools MCP 构建网站前端

AI 助手可以构建 Web 界面，但它往往“看不见”自己创建的内容。您最终需要手动截屏并逐条反馈修改意见。

Chrome DevTools MCP 改变了这一点。AI 能自行截屏、校验布局，并持续迭代直至视觉效果达标。

我们来用 Streamlit 构建一个 ChatGPT 克隆。为此您需要一个 OpenAI API 密钥。在运行提示词时提供给 AI 助手，以便其验证应用是否正常工作。提示词如下：

Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.技术支持

AI 会创建带侧边栏的应用，并截屏验证初始布局：

侧边栏包含 API 密钥输入、Clear Chat 与 New Chat 按钮，以及计数为 0 的消息计数器。界面就绪后，我们来测试聊天功能。

用一个简单问题进行测试：

聊天响应正确，计数器在下一张截图中显示为 2。它能处理多轮对话吗？

测试上下文连续性：

AI 记得之前的对话内容。接下来需要验证清空聊天功能。

点击 Clear Chat 按钮：

聊天记录成功清空，计数器重置为 0。

开始新会话：

很理想。AI 构建了一个可用的 ChatGPT 克隆，在每一步都通过截屏验证外观，并在无人干预下完成了全部功能测试。

这对任何框架都适用：React、Vue、Svelte、原生 HTML。AI 会验证布局、测试交互，并在您查看代码之前先行发现问题。

结语与后续步骤

Chrome DevTools MCP 通过对话实现浏览器自动化。您只需描述目标，AI 助手就会处理技术细节。无需写脚本，也不用调选择器。

本文覆盖了基础内容：安装服务器、导航页面、填写表单、点击元素与截图。随后介绍了通过控制台检查、网络监控与 JavaScript 执行来进行调试。最后，我们看到这些工具如何协作，帮助 AI“看见”自己创建的前端并完成构建。

接下来可以尝试

先从您正在开发的网站入手，请 AI 检查控制台错误或查看网络请求。如果您使用 Claude Code，我们的Claude Code 最佳实践指南介绍了有效的工具调用提示词模式。为不同状态截屏，并测试表单提交。

然后组合多种工具：导航至页面、填写并提交表单、捕获结果。检查控制台消息、列出失败的网络请求，并运行 JavaScript 验证页面状态。

当您熟悉基础后，尝试与 AI 一起创建一个小型 UI 组件，并让它在每一步验证布局。看看它如何在您手动检查前就捕获视觉问题。

若进行性能工作，请使用性能工具（performance_start_trace、performance_stop_trace、performance_analyze_insight）来分析页面加载时间并定位瓶颈。使用仿真工具（emulate_cpu、emulate_network、resize_page）在不同条件下进行测试。

Chrome DevTools MCP 只是众多服务器之一。将其与文件系统服务器、数据库工具或 API 集成结合，构建跨多系统的工作流。更多 MCP 示例，参见我们的Codex CLI MCP 教程与Google ADK MCP 教程。

若您想自行构建 MCP 服务器，请参阅Building an MCP Server and Client with FastMCP 2.0。