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：查找并修复控制台错误
- 导航至该应用程序
- 拍摄一张快照
- 点击“触发控制台错误”按钮
- 列出控制台消息以查看错误
- 使用 evaluate_script 来检查变量
场景2：调试失败的网络请求
- 点击“获取数据（404）”按钮
- 列出网络请求
- 按状态码筛选
- 检查请求/响应头
- 检查控制台中的错误信息
场景3：识别性能瓶颈
- 开始性能跟踪
- 点击“繁重计算”按钮
- 停止追踪
- 分析性能洞察
- 查找长时间运行的任务和主线程阻塞
场景4：测试表单验证
- 获取表单UID的快照
- 在表单中填写无效数据
- 提交并检查控制台以查找验证错误
- 填入有效数据并验证成功
场景5：监控内存泄漏
- 开始性能监控
- 多次点击“创建内存泄漏”
- 使用 evaluate_script 来检查 memoryLeakArray 的大小
- 监控浏览器内存使用情况
📝 示例调试会话
以下是一个完整的网络问题调试示例：
// 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"
})🎓 学习目标
通过完成这个演示，你将学会：
- 浏览和检查网页 使用MCP命令
- 监控控制台输出 用于错误和警告
- 追踪网络请求 并识别故障
- 自动化表单交互 用于测试
- 衡量绩效 并找出瓶颈
- 测试事件处理程序 （点击，悬停，拖放）
- 执行JavaScript 在页面上下文中
- 模拟不同条件 （网络缓慢，移动视口）
- 调试现实世界中的问题 在受控环境中
🔧 技巧与最佳实践
- 总是先截个图 - 你需要元素UID来与页面进行交互
- 使用 wait_for - 等待内容出现后再采取行动
- 检查控制台消息 - 许多错误在控制台中显现出来
- 监控网络 - 监控失败的请求和缓慢的API
- 使用 evaluate_script - 执行自定义JavaScript以检查状态
- 截取屏幕截图 - 问题的视觉记录
- 测试边缘情况 - 尝试无效输入、缓慢网络等。
🎯 下一步行动
- 启动服务器并打开应用程序
- 使用 Cursor 的 MCP 集成来运行 Chrome DevTools 命令
- 通过调试场景进行操作
- 创建你自己的测试场景
- 将这些技术应用到你的实际项目中
📚 额外资源
🤝 贡献/参与
欢迎添加更多调试场景或改进现有示例！
______________________________________________________________________
调试愉快！ 🐞✨（注：原文中的“🐞”和“✨”是表情符号，直接翻译为中文仍为相应的表情，但在此处为保持格式一致，仅对文字部分进行翻译说明。）不过，如果仅从文字角度理解，可以将其意译为“小虫子✨”（但需注意，这并不是标准的翻译，因为“🐞”通常代表瓢虫或某种小虫子，而“✨”是星星或闪耀的符号）。不过，更常见的做法是直接保留这些表情符号，因为它们在中文中也有着直观的表达意义