Chrome Devtools MCP Debug Demo

Chrome DevTools MCP 演示项目

这是一个综合性的演示应用程序，旨在帮助您学习和练习在Cursor中使用Chrome DevTools的MCP（模型上下文协议）进行调试。

🎯 包含内容

此演示包括：

• 控制台错误与警告练习监控控制台消息
• 网络请求调试API调用、失败的请求和缓慢的请求
• 表单交互测试表单自动化与验证
• 性能问题识别阻塞操作和内存泄漏
• DOM 操作监控动态内容变化
• 事件处理调试用户交互
• 故意植入的漏洞/缺陷练习错误检测和调试

🚀 开始使用

1. 启动开发服务器

选择以下方法之一：

使用 Node.js（推荐）：

npm install
npm start

使用Python：

python3 -m http.server 8080

该应用程序将在 http://localhost:8080

2. 在浏览器中打开

导航至 http://localhost:8080 在您的Chrome浏览器中。

🔍 Chrome DevTools MCP 命令指南

现在，您可以直接从 Cursor 中使用 Chrome DevTools 的 MCP 工具来调试这个应用程序！

基本导航

// Navigate to the demo app
mcp_chrome-devtools_navigate_page({ url: "http://localhost:8080" })

// Take a snapshot of the page to see all interactive elements
mcp_chrome-devtools_take_snapshot()

// Take a screenshot
mcp_chrome-devtools_take_screenshot({ format: "png" })

调试控制台错误

// Click the error button to generate console errors
mcp_chrome-devtools_click({ uid: "error-button-uid-from-snapshot" })

// List all console messages
mcp_chrome-devtools_list_console_messages()

监控网络请求

// Trigger network requests
mcp_chrome-devtools_click({ uid: "fetch-button-uid" })

// List all network requests
mcp_chrome-devtools_list_network_requests()

// Get specific request details
mcp_chrome-devtools_get_network_request({ 
  url: "https://jsonplaceholder.typicode.com/posts/1" 
})

// Filter by resource type
mcp_chrome-devtools_list_network_requests({ 
  resourceTypes: ["xhr", "fetch"] 
})

表单自动化与测试

// Fill out the form
mcp_chrome-devtools_fill_form({
  elements: [
    { uid: "username-uid", value: "testuser" },
    { uid: "email-uid", value: "test@example.com" },
    { uid: "country-uid", value: "us" }
  ]
})

// Submit the form
mcp_chrome-devtools_click({ uid: "submit-button-uid" })

性能分析

// Start performance trace
mcp_chrome-devtools_performance_start_trace({ 
  reload: false, 
  autoStop: false 
})

// Trigger heavy calculation
mcp_chrome-devtools_click({ uid: "heavy-calc-button-uid" })

// Stop trace and get results
mcp_chrome-devtools_performance_stop_trace()

// Analyze specific insights
mcp_chrome-devtools_performance_analyze_insight({ 
  insightName: "LCPBreakdown" 
})

测试事件处理程序

// Test hover events
mcp_chrome-devtools_hover({ uid: "hover-button-uid" })

// Test double click
mcp_chrome-devtools_click({ 
  uid: "dblclick-button-uid", 
  doubleClick: true 
})

// Test drag and drop
mcp_chrome-devtools_drag({ 
  from_uid: "draggable-uid", 
  to_uid: "dropzone-uid" 
})

JavaScript 评估

// Execute custom JavaScript in the page context
mcp_chrome-devtools_evaluate_script({
  function: "() => { return document.title; }"
})

// Check page state
mcp_chrome-devtools_evaluate_script({
  function: "() => { return { itemsCount: document.querySelectorAll('#itemsList li').length, formData: new FormData(document.getElementById('demoForm')) }; }"
})

// Get element properties
mcp_chrome-devtools_evaluate_script({
  function: "(el) => { return { text: el.innerText, visible: el.offsetWidth > 0 }; }",
  args: [{ uid: "element-uid-from-snapshot" }]
})

模拟与测试

// Emulate slow network
mcp_chrome-devtools_emulate_network({ 
  throttlingOption: "Slow 3G" 
})

// Emulate offline mode
mcp_chrome-devtools_emulate_network({ 
  throttlingOption: "Offline" 
})

// Disable network throttling
mcp_chrome-devtools_emulate_network({ 
  throttlingOption: "No emulation" 
})

// CPU throttling
mcp_chrome-devtools_emulate_cpu({ 
  throttlingRate: 4  // 4x slowdown
})

// Resize viewport
mcp_chrome-devtools_resize_page({ 
  width: 375, 
  height: 667  // iPhone SE size
})

对话处理

// When a confirm/alert/prompt appears, handle it
mcp_chrome-devtools_handle_dialog({ 
  action: "accept",
  promptText: "Optional text for prompts"
})

🐛 调试场景

场景1：查找并修复控制台错误

1. 导航至该应用程序
2. 拍摄一张快照
3. 点击“触发控制台错误”按钮
4. 列出控制台消息以查看错误
5. 使用 evaluate_script 来检查变量

场景2：调试失败的网络请求

1. 点击“获取数据（404）”按钮
2. 列出网络请求
3. 按状态码筛选
4. 检查请求/响应头
5. 检查控制台中的错误信息

场景3：识别性能瓶颈

1. 开始性能跟踪
2. 点击“繁重计算”按钮
3. 停止追踪
4. 分析性能洞察
5. 查找长时间运行的任务和主线程阻塞

场景4：测试表单验证

1. 获取表单UID的快照
2. 在表单中填写无效数据
3. 提交并检查控制台以查找验证错误
4. 填入有效数据并验证成功

场景5：监控内存泄漏

1. 开始性能监控
2. 多次点击“创建内存泄漏”
3. 使用 evaluate_script 来检查 memoryLeakArray 的大小
4. 监控浏览器内存使用情况

📝 示例调试会话

以下是一个完整的网络问题调试示例：

// 1. Navigate to app
await mcp_chrome-devtools_navigate_page({ 
  url: "http://localhost:8080" 
})

// 2. Take snapshot to see elements
const snapshot = await mcp_chrome-devtools_take_snapshot()

// 3. Click the failed fetch button (use UID from snapshot)
await mcp_chrome-devtools_click({ 
  uid: "failedFetchBtn" 
})

// 4. Wait for request to complete
await mcp_chrome-devtools_wait_for({ 
  text: "Network Error", 
  timeout: 5000 
})

// 5. List all network requests
const requests = await mcp_chrome-devtools_list_network_requests()

// 6. Check console for errors
const consoleLogs = await mcp_chrome-devtools_list_console_messages()

// 7. Take screenshot of error state
await mcp_chrome-devtools_take_screenshot({ 
  format: "png",
  filePath: "error-screenshot.png"
})

🎓 学习目标

通过完成这个演示，你将学会：

1. 浏览和检查网页 使用MCP命令
2. 监控控制台输出 用于错误和警告
3. 追踪网络请求 并识别故障
4. 自动化表单交互 用于测试
5. 衡量绩效 并找出瓶颈
6. 测试事件处理程序 （点击，悬停，拖放）
7. 执行JavaScript 在页面上下文中
8. 模拟不同条件 （网络缓慢，移动视口）
9. 调试现实世界中的问题 在受控环境中

🔧 技巧与最佳实践

1. 总是先截个图 - 你需要元素UID来与页面进行交互
2. 使用 wait_for - 等待内容出现后再采取行动
3. 检查控制台消息 - 许多错误在控制台中显现出来
4. 监控网络 - 监控失败的请求和缓慢的API
5. 使用 evaluate_script - 执行自定义JavaScript以检查状态
6. 截取屏幕截图 - 问题的视觉记录
7. 测试边缘情况 - 尝试无效输入、缓慢网络等。

🎯 下一步行动

1. 启动服务器并打开应用程序
2. 使用 Cursor 的 MCP 集成来运行 Chrome DevTools 命令
3. 通过调试场景进行操作
4. 创建你自己的测试场景
5. 将这些技术应用到你的实际项目中

📚 额外资源

• Chrome DevTools MCP 文档
• Chrome DevTools 官方文档
• 网页调试最佳实践

🤝 贡献/参与

欢迎添加更多调试场景或改进现有示例！

______________________________________________________________________

调试愉快！ 🐞✨（注：原文中的“🐞”和“✨”是表情符号，直接翻译为中文仍为相应的表情，但在此处为保持格式一致，仅对文字部分进行翻译说明。）不过，如果仅从文字角度理解，可以将其意译为“小虫子✨”（但需注意，这并不是标准的翻译，因为“🐞”通常代表瓢虫或某种小虫子，而“✨”是星星或闪耀的符号）。不过，更常见的做法是直接保留这些表情符号，因为它们在中文中也有着直观的表达意义