Chrome Dev Tools MCP Guide

Chrome DevTools MCP - 实用指南

这本实用指南展示了如何使用 Chrome DevTools MCP（可能指“Chrome 开发者工具中的某种特定功能、模块或配置”） (模型上下文协议) 与 Claude 代码结合，用于交互式地调试和修复网页应用中的错误。

目录

• 项目描述
• Chrome DevTools MCP 安装
• 用例：修复表单错误
• 关键概念
• 项目结构

项目描述

这个实验项目展示了以下方面的集成：

• FastAPI简单的后端，带有用于问候处理的端点
• HTML 表单前端表单，展示故意设置的错误
• Chrome DevTools MCP（注：MCP在此处可能是一个特定上下文或项目中的缩写或代号，没有具体上下文难以给出确切翻译，但通常可以理解为“某种与Chrome开发者工具相关的MCP（可能是指某种模块、组件、插件或特定功能）”）实时检测与调试工具

Chrome DevTools MCP 安装

先决条件

• 安装了Claude代码
• 已安装Google Chrome
• Python 3.8+ 配合 FastAPI 和 uvicorn

安装步骤

1. 安装 Chrome DevTools MCP 服务器：

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

1. 重启Claude代码 以便更改生效。

1. 跑 /mcp 并确保它正在运行。

验证安装

克劳德·科德现在将能够使用MCP工具，如：

• mcp__chrome-devtools__take_snapshot
• mcp__chrome-devtools__list_console_messages
• mcp__chrome-devtools__list_network_requests
• mcp__chrome-devtools__navigate_page
• mcp__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 来：

1. 在Chrome浏览器中打开HTML页面：

   mcp__chrome-devtools__navigate_page → index_with_error.html

1. 捕获一个DOM快照：

   mcp__chrome-devtools__take_snapshot

1. 模拟表单提交：

   mcp__chrome-devtools__click → Submit button

1. 检查控制台错误：

   mcp__chrome-devtools__list_console_messages

1. 分析网络请求：

   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 在前端，因为：

1. 完全灵活允许手动将参数作为查询字符串发送
2. 精确控制你可以构建出终端点所期望的确切URL
3. 直接测试使用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的优势

1. 交互式调试Claude Code 能够准确看到浏览器中发生的一切
2. 快速的开发周期无需手动重新加载即可测试更改
3. 视觉证据用于验证的截图和控制台日志
4. 自动化测试模拟点击，填写表单，验证响应

有用的命令

启动 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中检查网页
• 识别网络和控制台错误
• 基于真实证据生成解决方案
• 直接在浏览器中进行测试修正

这种集成消除了手动调试的需求，并显著加快了开发和修复错误的过程。