实验室：通过模型上下文协议（MCP）将AI代理连接到开发者工具
Chrome DevTools MCP 集成
本实验室引入了模型上下文协议（MCP），作为人工智能语言模型与实时开发者环境之间的桥梁。通过使用Chrome DevTools MCP服务器进行实操练习，我们展示了人工智能代理如何超越“蒙眼编程”，主动实时检查、调试和分析正在运行的网络应用。
______________________________________________________________________
我们正在做什么
实验室目标
学生们学会了使用模型上下文协议（MCP），特别是Chrome DevTools MCP服务器，将人工智能代理（Claude CLI）连接到实际的开发者工具中。这种集成使得基于大型语言模型（LLM）的助手不仅能够静态地生成或推理代码，还能够查看、分析并与实时网页应用程序进行交互。
我们建造的桥梁
我们填补了人工智能推理与软件执行环境之间的鸿沟——这是构建下一代自主编码系统面临的关键挑战。我们的AI代理并非仅基于静态代码文本提出修复方案，而是能够：
- 见 代码运行时实际会发生什么
- 检查 实时浏览器状态和行为
- 分析 实际性能指标
- 验证 实时动态修正
______________________________________________________________________
为何重要：揭开蒙眼布
问题：“蒙眼编程”
典型的AI编码助手（如Gemini、Claude、Copilot）只能根据代码文本提出修复建议——它们无法看到代码实际运行时的情况。这导致了我们所说的 “blindfolded coding” 翻译成中文是“蒙眼编码” 其中AI：
- 对运行时行为的猜测
- 无法验证修复是否真正有效
- 仅在执行时可见的遗漏问题
- 无法理解对用户的影响
解决方案：MCP集成
通过MCP集成Chrome DevTools，AI代理能够实时了解：
运行时诊断：
- 控制台错误和警告
- 网络流量和失败请求
- DOM（文档对象模型）状态和结构
视觉与性能分析：
- 浏览器中的实际渲染和布局问题
- 性能追踪指标和度量（LCP、CLS、TTFB）
- 布局偏移和视觉回归
交互功能：
- 用户交互（按钮点击、表单提交）
- 动态状态变化
- 实时调试
这使得人工智能能够 动态调试、测试和验证更改，而不是依赖猜测。这是实现人工智能系统能够实时自主测试、验证和改进网络应用的基础性一步。
______________________________________________________________________
理解MCP（模型上下文协议）
什么是MCP？
模型上下文协议（MCP）是一种 开源标准 这定义了语言模型如何与外部工具、数据源和运行时系统进行连接。它提供了一种结构化的方式来“扩展”模型的能力——本质上是允许模型通过受控接口调用工具。
MCP的工作原理
┌─────────────┐ ┌─────────────┐ ┌──────────────┐
│ AI Model │ ◄─MCP──►│ MCP Server │ ◄──────►│ Chrome │
│ (Claude) │ │ (Bridge) │ │ DevTools │
└─────────────┘ └─────────────┘ └──────────────┘MCP服务器 起着桥梁的作用，即：
- 暴露工具类命令（例如，开始追踪、检查控制台日志）
- 将AI请求转换为浏览器操作
- 将结构化数据返回给AI模型
- 确保安全、模块化且可互操作的交互
相较于直接插件架构的优势
- 更安全： 具有定义权限的受控接口
- 模块化： 即插即用不同工具
- 可互操作： 标准协议适用于不同的AI模型
- 可扩展性： 轻松创建满足特定需求的自定义MCP服务器
______________________________________________________________________
实验室练习：动手进行MCP集成
为您提供的设置说明
1. 使用Chrome DevTools MCP配置Claude Code
创建或编辑 ~/Library/Application Support/Claude/claude_desktop_config.json (Mac) 或者 %APPDATA%\Claude\claude_desktop_config.json (Windows)：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}保存后重启Claude桌面版。
或
2. 使用MCP配置Gemini CLI
您需要在Gemini CLI中添加MCP配置。具体步骤取决于他们Gemini CLI的设置。
使用设置命令：
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
或者手动将 JSON 配置插入到 .gemini/settings.json 中：
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}保存并重启Gemini CLI。
或
3. 安装带有VScode Co-pilot的Chrome DevTools MCP
你需要在VSCode的Copilot设置中添加MCP配置。
按照说明在VSCode中打开Co-pilot的MCP设置：
Ctrl+Shift+P -> enter "chat.mcp.access" -> MCP: add server -> enter "npx chrome-devtools-mcp@latest" -> workspace
您还需要在聊天面板的工具列表中启用此MCP。
练习1：使用MCP进行性能分析
- 提示输入：
Please check the LCP of web.dev using the chrome devtools MCP. - 目标： web.dev（生产网站）
如果它启动了Chrome并返回了性能数据，那么你就可以开始了！
常见问题：
- 如果你看到类似这样的错误信息：“2025-10-22 13:10:04.291 \[警告\] \[服务器标准错误\] 错误：
chrome-devtools-mcp“不支持 Node v20.9.0。请升级到 Node 20.19.0 LTS 或更新的 LTS 版本。”您需要更新您的 Node.js 版本。要进行此操作，请遵循：https://stackoverflow.com/questions/8191459/how-do-i-update-node-js
AI代理行为：
- 自动启动的性能追踪
- 分析了LCP（可能是指某种材料或系统的）失效阶段
- 已确定的优化机会
- 提供了可操作的见解
关键学习点： 该人工智能代理能够在无人工干预的情况下自主测量和解读性能指标，展现了实时分析能力。
______________________________________________________________________
练习2：调试任务追踪器专业版（localhost:8080）
启动应用程序
# Navigate to the buggy-app folder
cd buggy-app
# Start a simple HTTP server (choose one):
python3 -m http.server 8080
# OR
npx serve -p 8080- 提示输入：
Please open localhost:8080 in Chrome and check what issues exist. Look for console errors, network failures, and visual problems. - 目标： 带有故意植入错误的简单网页应用
______________________________________________________________________
预期中的错误（或漏洞）
错误1：图片损坏（404）
- 位置：
index.html
错误2：未定义变量
- 地点：
script.js
错误3：资源缓慢
- 位置：
index.html
错误4：CSS溢出
- 地点：
styles.css
关键学习点： 该人工智能能够区分损坏状态和修复状态，为验证提供反馈循环——这是自主调试中的一项关键能力。
______________________________________________________________________
可以测试的示例提示
查找网络问题：
Some images on localhost:8080 are not loading.
Use DevTools to find which requests are failing and why.查找控制台错误：
Check the console on localhost:8080 for JavaScript errors.
What's causing them and how can I fix it?检查性能：
Localhost:8080 seems slow to load.
Run a performance trace and identify what's taking so long.检查布局：
The task list on localhost:8080 looks broken.
Inspect the DOM and CSS to find the layout problem.已展示MCP（多通道处理器/模块/能力等，具体含义根据上下文确定）功能
AI代理在MCP（可能是指某种特定系统或平台）中能做什么：
1. 自主导航
- 打开多个浏览器标签页
- 导航至特定URL
- 处理页面重定向和加载状态
2. 运行时检查
- 阅读控制台消息（错误、警告、日志）
- 通过快照检查DOM结构
- 分析网络流量和响应
- 通过截图捕捉视觉状态
3. 性能分析
- 启动性能追踪
- 自动测量核心网页性能指标
- 将LCP分解为组成阶段
- 识别性能瓶颈
4. 验证与测试
- 应用修复后重新测试
- 比较前后状态
- 验证错误是否已解决
- 确认视觉上的改进
5. 上下文推理
- 将控制台错误与网络故障相关联
- 了解框架特定的模式（React 水合）
- 按严重程度对问题进行优先排序
- 根据运行时数据提出针对性修复建议
我们学到的东西
1. MCP消除人工智能的盲目性 拥有MCP访问权限的AI代理可以看到运行时的行为，而不仅仅是静态代码。这从根本上改变了它们的调试和分析能力。
2. 实时验证至关重要 能够立即测试修复方案并看到实际结果，这种能力为自主系统创造了一个必不可少的反馈循环。
3. 结构化工具访问更安全 MCP的受控接口在启用强大功能的同时，防止了危险操作，其安全性优于无限制的浏览器控制。
4. 上下文很重要 该人工智能能够做出更佳的推荐，因为它能够同时看到完整的上下文信息：错误、网络状态、视觉输出以及性能数据。
______________________________________________________________________
对比：MCP与传统方法
传统的AI编码助手
User: "Fix the bug in this code"
AI: [analyzes text only]
AI: "Try changing line 42 to..."
User: [makes change, tests manually]
User: "That didn't work"
AI: "Try this instead..."
[repeat cycle]局限性：
- 无法查看运行时行为
- 无法验证修复情况
- 依赖于用户反馈
- 缓慢的迭代周期
- 基于猜测的调试
支持MCP的AI代理
User: "Check localhost:8080 for issues"
AI: [opens page, inspects console, checks network]
AI: "Found 3 issues: [detailed analysis]"
User: [fixes code]
AI: [automatically re-tests]
AI: "All issues resolved. Screenshot shows logo now displays."优点：
- 直接运行时可见性
- 自主验证
- 即时反馈
- 基于证据的建议
- 完整的调试周期
______________________________________________________________________
技术实施说明
使用的关键MCP功能
导航与设置：
new_page(url)- 打开新的浏览器标签页navigate_page(url)- 导航到URLselect_page(index)- 在选项卡之间切换
检查：
take_snapshot()- 获取带有UID的DOM结构list_console_messages()- 读取所有控制台输出list_network_requests()- 获取所有HTTP请求get_network_request(url)- 详细的请求信息
演出
performance_start_trace()- 开始录音performance_stop_trace()- 获取指标与见解
视觉：
take_screenshot()- 捕获当前视口
______________________________________________________________________
结论
本实验室成功展示了模型上下文协议在将人工智能代理连接到实时开发环境方面的变革潜力。通过消除静态代码分析的“盲点”，我们实现了自主调试、性能分析和验证功能。
您可以将MCP测试应用于个人项目或团队项目。尝试使用额外的MCP命令。创建自定义的调试工作流
______________________________________________________________________