Chrome DevTools MCP - 实用指南
这本实用指南展示了如何使用 Chrome DevTools MCP（可能指“Chrome 开发者工具中的某种特定功能、模块或配置”） (模型上下文协议) 与 Claude 代码结合，用于交互式地调试和修复网页应用中的错误。
目录
项目描述
这个实验项目展示了以下方面的集成：
- FastAPI简单的后端，带有用于问候处理的端点
- HTML 表单前端表单，展示故意设置的错误
- Chrome DevTools MCP（注：MCP在此处可能是一个特定上下文或项目中的缩写或代号，没有具体上下文难以给出确切翻译，但通常可以理解为“某种与Chrome开发者工具相关的MCP（可能是指某种模块、组件、插件或特定功能）”）实时检测与调试工具
Chrome DevTools MCP 安装
先决条件
- 安装了Claude代码
- 已安装Google Chrome
- Python 3.8+ 配合 FastAPI 和 uvicorn
安装步骤
- 安装 Chrome DevTools MCP 服务器：
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest- 重启Claude代码 以便更改生效。
- 跑
/mcp并确保它正在运行。
验证安装
克劳德·科德现在将能够使用MCP工具，如：
mcp__chrome-devtools__take_snapshotmcp__chrome-devtools__list_console_messagesmcp__chrome-devtools__list_network_requestsmcp__chrome-devtools__navigate_pagemcp__chrome-devtools__click- 还有很多其他的。。。
用例：修复表单错误
初始场景
该项目包括：
后端（main.py）：
@app.post("/reply")
def reply_hello(greeting: str) -> str:
if isinstance(greeting, str) and (greeting.lower() == "hello"):
return "world"
else:
raise HTTPException(status_code=400, detail="At least say hello")前端（index_with_error.html）：
Submit
问题
当表单被提交时，FastAPI会做出响应，返回一个 422错误:
{
"detail": [{
"type": "missing",
"loc": ["query", "greeting"],
"msg": "Field required",
"input": null
}]
}鉴于在服务器上通过添加（某种方法）来修复错误在理论上是不可能的 Form Data我们将使用Chrome DevTools MCP来检查并修复Claude Code中的问题。
使用Chrome DevTools MCP
为Claude Code提供的建议提示：
Use `chrome-devtools-mcp` to fix the error in @index_with_error.html form. Write your solution in a new HTML file called `index_fixed.html`. DO NOT REVIEW OR MODIFY THE @main.py FILE.使用MCP进行调试过程
Claude Code 将自动使用 Chrome DevTools MCP 来：
- 在Chrome浏览器中打开HTML页面：
mcp__chrome-devtools__navigate_page → index_with_error.html- 捕获一个DOM快照：
mcp__chrome-devtools__take_snapshot- 模拟表单提交：
mcp__chrome-devtools__click → Submit button- 检查控制台错误：
mcp__chrome-devtools__list_console_messages- 分析网络请求：
mcp__chrome-devtools__list_network_requests
mcp__chrome-devtools__get_network_request → http://127.0.0.1:8000/reply诊断
克劳德·科德将进行识别 两个问题：
问题1：参数不匹配
- 这个（或那个，根据上下文确定具体指代） HTML 表单 发送数据为
application/x-www-form-urlencoded在……中 请求体 - 这个（或“该”） FastAPI 端点 期望着
greeting参数为a 查询参数 （在URL中） - 错误：
"loc":["query","greeting"]表示 FastAPI 正在查询字符串中寻找该参数
问题2：跨域资源共享（CORS）
- 来自本地文件的请求（
file://被CORS策略阻止 - 错误：
Access to fetch at 'http://127.0.0.1:8000/reply' from origin 'null' has been blocked by CORS policy
实施的解决方案
Claude Code 将自动生成 index_fixed.html:
document.getElementById('greetingForm').addEventListener('submit', async function(e) {
e.preventDefault();
const greeting = document.getElementById('greeting').value;
// Send greeting as query parameter
const response = await fetch(
`http://127.0.0.1:8000/reply?greeting=${encodeURIComponent(greeting)}`,
{ method: 'POST' }
);
if (response.ok) {
const data = await response.text();
console.log('Success:', data);
}
});
验证
克劳德·科德将自动测试该解决方案：
mcp__chrome-devtools__navigate_page → index_fixed.html
mcp__chrome-devtools__click → Submit button
mcp__chrome-devtools__list_network_requests → Verify status 200
mcp__chrome-devtools__take_screenshot → Capture visual evidence关键概念
HTML 表单与 JavaScript 的局限性
纯HTML表单 只能发送以下类型的数据：
application/x-www-form-urlencoded（默认）multipart/form-data（对于文件）
两者都发送数据在 POST请求体，而不是作为查询参数。
为什么使用JavaScript与Fetch API？
当 无法修改服务器 使用 Form(...) 在 FastAPI 中：
# Ideal solution but requires modifying the server
from fastapi import Form
@app.post("/reply")
def reply_hello(greeting: str = Form()): # ← Accepts data from body
return "world"另一种选择是使用 使用 Fetch API 的 JavaScript 在前端，因为：
- 完全灵活允许手动将参数作为查询字符串发送
- 精确控制你可以构建出终端点所期望的确切URL
- 直接测试使用Chrome DevTools MCP，Claude Code可以创建JavaScript代码，并且 直接在浏览器中测试它 无需更改后端
Chrome DevTools MCP如何促进这一过程的示例：
// Claude Code generates this code and tests it in Chrome
const url = `http://127.0.0.1:8000/reply?greeting=${encodeURIComponent(greeting)}`;
const response = await fetch(url, { method: 'POST' });
// MCP verifies the result immediately:
// mcp__chrome-devtools__list_network_requests → Status 200 ✓
// mcp__chrome-devtools__list_console_messages → No errors ✓Chrome DevTools MCP的优势
- 交互式调试Claude Code 能够准确看到浏览器中发生的一切
- 快速的开发周期无需手动重新加载即可测试更改
- 视觉证据用于验证的截图和控制台日志
- 自动化测试模拟点击，填写表单，验证响应
有用的命令
启动 FastAPI 服务器：
uvicorn main:app --reload访问API文档：
- Swagger UI: http://127.0.0.1:8000/docs（中文可译为：“Swagger 用户界面：http://127.0.0.1:8000/docs”）
- ReDoc：http://127.0.0.1:8000/redoc
结论
这个项目展示了如何 Chrome DevTools MCP（可能指“Chrome开发者工具的某种特定配置或模式”，但具体含义需根据上下文确定，MCP在此处无直接对应中文翻译，需结合具体语境理解） 将Claude Code转变为一个完整的网页调试助手。只需一个简单的提示，Claude就能：
- 在Chrome中检查网页
- 识别网络和控制台错误
- 基于真实证据生成解决方案
- 直接在浏览器中进行测试修正
这种集成消除了手动调试的需求，并显著加快了开发和修复错误的过程。