用途:通过 MCP 调用 Chrome DevTools,进行网页调试、故障排查与浏览器自动化。浏览器在首次工具调用时自动启动,使用持久化 Chrome 配置文件;可通过 MCP 服务器配置中的 CLI 参数调整:npx chrome-devtools-mcp@latest --help。
主要能力与启用方式:扩展工具需加 --categoryExtensions 标志,内存工具需加 --memoryDebugging 标志。页面级工具需 pageId 参数,用 list_pages 查看可用页面及 ID(如 pageId: 1),或使用 new_page 返回的 ID。启用 --categoryExtensions 后,evaluate_script 的 pageId 可选,可改用 serviceWorkerId 在扩展后台 Service Worker 中执行。元素交互先用 take_snapshot 获取带 uid 的页面结构,若元素未找到应重新快照,再以对应 pageId 执行 click、fill 等操作。
工作流:交互前依次为 navigate_page 或 new_page、wait_for、take_snapshot、再交互。取数据时,大输出用 filePath 参数,用分页(pageIdx、pageSize)与过滤(types)减少数据量,输入操作可设 includeSnapshot: false,除非需要更新页面状态。自动化交互选用 take_snapshot(基于文本、更快),视觉检查选 take_screenshot,CSS 与样式检查用 get_css_styles,其余运行时 DOM/JS 数据用 evaluate_script。可并行发送多个工具调用,但保持 navigate → wait → snapshot → interact 顺序。
测试扩展:安装用 install_extension 指定解包扩展路径,用 list_extensions 取扩展 ID,用 trigger_extension_action 打开弹出页或侧边栏,用 evaluate_script 传 serviceWorkerId 检查状态,再导航到扩展生效页面用 take_snapshot 验证内容脚本。需在 MCP 配置中设置 {"mcpServers": {"chrome-devtools": {"command": "npx", "args": ["chrome-devtools-mcp@latest", "--categoryExtensions"]}}},改动后需重启 MCP 服务器或 AI 客户端。
限制:扩展工具仅在启动时带 --categoryExtensions 标志才可用;若 chrome-devtools-mcp 能力不足,改用 Chrome DevTools UI(https://developer.chrome.com/docs/devtools 与 https://developer.chrome.com/docs/devtools/ai-assistance);启动报错参见 https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md。其他收费、平台与价格信息暂未提供。