使用 Chrome DevTools MCP 进行调试：让 AI 在浏览器中“拥有双眼”

主要介绍了 Chrome DevTools MCP 如何与 AI 编码助手结合，为浏览器中的代码调试提供强大支持。它允许 AI 直接连接到浏览器，查看、诊断和验证代码运行结果。今日文章由 @Emmanuel John 分享，前端早读课@飘飘编译。

做网页开发已经很多年了，也用过不少调试工具，但没有哪个像 Chrome DevTools MCP 这样让我感到兴奋。长久以来，AI 编码助手在 “看不见” 的情况下写代码，它们无法看到自己代码运行后的实际效果。

Chrome DevTools MCP 让 AI 编码代理 “拥有了视觉”。它能将 AI 编码助手直接连接到浏览器，使其能够查看、诊断并验证自己的工作结果。

在这篇指南中，我不仅会演示如何使用它，更会告诉你为什么它成了我首选的调试伙伴。

你将学会如何：

设置并配置 Chrome DevTools MCP 客户端
借助 AI 辅助诊断控制台错误
模拟用户行为
调试样式与布局问题

前置条件

在开始之前，请确保你具备以下条件：

基本的网页开发与调试知识
一个支持 MCP 的 AI 编码助手（我使用的是 Gemini CLI）
已安装 Chrome 浏览器
已安装 Node.js v20.19 或更新的 LTS 版本
熟悉 Chrome DevTools（了解即可，非必须）

准备好了吗？我们开始吧。

什么是 Chrome DevTools MCP 服务器？

Chrome DevTools MCP 服务器 是 Google 设计的一个 MCP 服务器，它让 AI 代理能够在你最喜欢的代码编辑器中直接访问 Chrome DevTools。

借助它，AI 代理可以执行以下操作：

检查 DOM 与 CSS
查看性能追踪
执行 JavaScript
读取控制台输出

这个工具赋予 AI 编码代理强大的调试能力，接下来我们会在实践中逐步探索。

它包含以下实用工具：click、upload_file、listnetworkrequests、list-console_messages、take_snapshot、…… 以及更多

本文不会覆盖所有工具，而是通过实际操作帮助你理解它们的使用方式，并将其融入到你的开发工作流程中。

如何设置 Chrome DevTools MCP

我将使用 Gemini CLI 与 Chrome DevTools 交互。以下是设置步骤：

首先在终端中运行以下命令：
 cd ~
进入用户主目录后，再运行：
 cd .gemini
进入 .gemini 文件夹后，执行：
 ls
此命令会列出所有文件和文件夹。我们要关注的是 settings.json 文件。

运行以下命令在 VS Code 中打开它：
 code settings.json
在文件中添加以下内容并保存：
 "mcpServers": {
   "chrome-devtools": {
     "command": "npx",
     "args": ["-y", "chrome-devtools-mcp@latest"]
   }
 }
文件修改完成后，看起来应该类似如下：

要验证是否成功在 Gemini CLI 中配置了 MCP 服务器，运行命令：
 /mcp
你应该会看到类似下面的界面：

让我们做个测试，为了验证我们是否能与服务器通信，可以用 AI 尝试以下命令：

“检查这个应用在 http://localhost:5173 的状态”

此时浏览器会显示提示：“Chrome is being controlled by automated test software”
这表示 Gemini CLI 通过 MCP 服务器成功接管了浏览器实例。

它返回了以下输出：

接着它使用 navigate-page 工具访问页面，再用 take_snapshot 工具截取快照，并返回结果：

我已导航至 http://localhost:5173/，页面标题为 “tunein”，但页面内容似乎是空白的。

接下来，我们将使用 MCP 服务器来调试这个页面问题。

诊断控制台错误

我们想看看应用的运行情况，以及控制台中是否有错误。

现在我们不需要手动打开 Chrome 去看错误信息，AI 代理可以直接读取控制台错误并在编辑器中展示。

输入以下提示开始：

我们需要查看这个应用可能在控制台中显示的错误。

AI 返回结果：

React 未定义。

接着我们让它修复这个问题，并通过 Chrome DevTools MCP 服务器验证修复是否成功：

修复 “React is not defined” 错误，并使用 Chrome DevTools MCP Server 确认更改。

我已授权 Gemini CLI 修改代码。

Gemini 修改完代码后，请求我授权使用 list_console_messages 工具来确认错误是否仍存在。

它报告说 “React is not defined” 错误已消失，控制台只显示一个提示：建议安装 React DevTools。

很好！我允许它再拍摄应用的浏览器快照。

它返回的结果表明页面已经正确显示：

最后，我们在浏览器中打开页面确认：

调试样式与布局问题

我们的应用需要在所有屏幕尺寸上都保持响应式布局。可惜现在的效果在移动端看起来相当糟糕：

那就来修复它吧。

假装我们还没发现它 “不响应式” 的问题，我们可以先让 AI 编码代理测试一下运行在 http://localhost:5173/ 的应用在不同屏幕下的响应情况：

但不知为何，即使多次尝试使用 resize_page 工具，我仍不断收到错误信息：

好在 AI 编码代理非常 “机智”，它改用 take_screenshot 工具为页面截取了多张截图：

接下来，我让 AI 修改样式，让页面在所有屏幕尺寸上都具备良好的响应性。

输入以下提示：

根据截图结果，让页面在所有屏幕尺寸下都具备响应式布局。

就在我修复响应式问题的过程中，应用界面上突然出现了 Vite 报错：

这正好是检验 MCP 服务器能力的好机会。我让 AI 去排查：

我在屏幕上遇到 Vite 错误，你能通过 Chrome MCP 服务器查看并分析吗？

果然，Gemini CLI 使用 MCP 服务器的 take_screenshot 工具读取了浏览器上的报错信息：

注意到我们不需要手动打开浏览器复制错误内容再粘贴到终端中 ——AI 就能直接识别并读取错误。

经过修复后，应用在所有屏幕尺寸上都能正常显示：

不过，又出现了一个新问题 —— 页面元素似乎相互重叠：

于是我再次请求 Chrome MCP 服务器帮忙：

Gemini CLI 立刻行动，使用 MCP 服务器的 navigate-page 工具访问页面，并通过 take-screenshot 截图分析问题。它很快定位并修复了错误：

模拟用户行为与测试

可以使用 Chrome 开发者工具的 MCP 服务器来模拟用户行为和进行测试。

借助它的 fill 工具，服务器能访问输入框、点击按钮，并在操作后生成一份关于输入与按钮状态的详细报告。

让我们来实际看看效果。

我向 AI 代理输入以下提示：

以下是它的部分输出结果：

从结果可以看到，它对页面上的按钮与输入框进行了详细分析。

接着我继续追问：

像真实用户一样，逐个测试页面中的输入框和按钮。

Gemini CLI 开始执行用户交互测试，几分钟后返回了详细报告，描述了输入框和按钮的运行状态：

如果截图中的报告看不清楚，以下是文字版内容：

“我尝试与页面元素交互。由于搜索栏设置了 readOnly 属性，输入无效且超时。点击 ‘Premium’ 链接没有任何变化，说明它只是一个占位符。
点击 ‘Support’ 链接时出现 DOM.resolveNode 错误，暗示页面在动态重新渲染。
最后，点击 ‘Download’ 链接同样超时，确认它也是一个占位符。
总结：所有交互元素目前对用户来说都是无效的。”

我们暂时不会修复这些交互问题，而是将在下一步通过 AI 代理和文本编辑器继续进行网络与性能测试。

测试网络性能与 CPU 性能

接下来，我们来看看如何使用 Chrome DevTools MCP 服务器 对应用进行网络和性能测试。

在本节中，Chrome DevTools MCP 服务器为我们提供了两个非常实用的工具：emulate_cpu、emulate_network。

网络性能测试

首先，让我们测试网页在 2G、3G 和 4G 网络下的表现。

输入以下提示：

我需要你检查运行在 http://localhost:5173/ 的应用，并展示该页面在 2G、3G 和 4G 网络下的性能表现。

执行后，AI 在代码编辑器中生成了一份详细报告，展示了页面在不同网络环境下的加载速度和响应情况。

下面是报告摘要及优化建议：

不得不说，这太酷了 —— 这能节省我们大量的时间。

CPU 性能测试

接下来，我们来测试页面在不同 CPU 条件下的表现。

输入以下提示：

我想了解这个页面在不同 CPU 场景下的性能表现。

几条命令之后，AI 就生成了完整的 CPU 测试报告：

构建自动化测试工作流

与其每次都手动执行这些测试步骤，我们完全可以让 AI 编码代理自动化完成。实现这一点的方法之一是使用 GitHub Spec Kit。

当你把 Chrome MCP 服务器 与 Spec Kit 结合使用时，可以在代码编辑器中自动执行：

用户行为测试
网络速度测试
CPU 性能测试

这对喜欢 “沉浸式编程（vibe coding）” 的开发者来说尤其方便。

结语

Chrome DevTools MCP 搭配 AI 编码代理，正在彻底改变网页开发的方式 —— 它让 AI 真正拥有了 “浏览器的眼睛”。

这种结合使 AI 能够：

诊断并修复错误
自动化调试任务
深度分析应用性能与用户行为

这让我们离 “AI 实时理解并与浏览器交互” 的未来更近一步。不久之后，我们或许就能看到由 AI 驱动的自动化测试、智能错误检测，甚至用户体验优化。

转自：https://mp.weixin.qq.com/s/FYNG99V4RkTjmo6wl5navg