SuperAPI AI 工具集

chrome-devtools

测试与质量

查看项目

更新于 10-15 17:19

技能介绍

用途:通过 MCP 调用 Chrome DevTools,用于高效调试、故障排查和浏览器自动化,适合调试网页与自动化浏览器交互。

主要能力与用法:浏览器在首次工具调用时自动启动并使用持久化 Chrome 配置,可通过 MCP 服务器配置中的 CLI 参数设置,例如 npx chrome-devtools-mcp@latest --help。工具作用于当前选中的页面,用 list_pages 查看可用页面,再用 select_page 切换上下文。元素交互前用 take_snapshot 获取页面结构与元素 uid,每个元素有唯一 uid;若元素未找到,重新 snapshot,因为元素可能已被移除或页面已变化。

推荐工作流:交互前先 navigate_page 或 new_page 导航,再用 wait_for 等待内容加载,然后 take_snapshot 理解结构,最后用 uid 执行 click、fill 等操作。数据获取上,大输出(截图、快照、trace)使用 filePath 参数;用分页(pageIdx、pageSize)和过滤(types)减少数据量;输入操作可设 includeSnapshot: false,除非需要更新后的页面状态。自动化交互优先 take_snapshot(基于文本、更快),视觉检查用 take_screenshot,额外数据可用 evaluate_script。可并行发送多个工具调用,但保持 navigate → wait → snapshot → interact 的顺序。

限制与排错:若 chrome-devtools-mcp 不足,可使用 Chrome DevTools UI,参考 developer.chrome.com/docs/devtools 与 developer.chrome.com/docs/devtools/ai-assistance;启动报错可参考 github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md。