Core Concepts
Browser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: npx chrome-devtools-mcp@latest --help.
Page selection: Tools operate on the currently selected page. Use list_pages to see available pages, then select_page to switch context.
Element interaction: Use take_snapshot to get page structure with element uids. Each element has a unique uid for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.
Workflow Patterns
Before interacting with a page
- 1. Navigate:
navigate_page or INLINECODE7 - Wait:
wait_for to ensure content is loaded if you know what you look for. - Snapshot:
take_snapshot to understand page structure - Interact: Use element
uids from snapshot for click, fill, etc.
Efficient data retrieval
- - Use
filePath parameter for large outputs (screenshots, snapshots, traces) - Use pagination (
pageIdx, pageSize) and filtering (types) to minimize data - Set
includeSnapshot: false on input actions unless you need updated page state
Tool selection
- - Automation/interaction:
take_snapshot (text-based, faster, better for automation) - Visual inspection:
take_screenshot (when user needs to see visual state) - Additional details:
evaluate_script for data not in accessibility tree
Parallel execution
You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.
Troubleshooting
If chrome-devtools-mcp is insufficient, guide users to use Chrome DevTools UI:
- - https://developer.chrome.com/docs/devtools
- https://developer.chrome.com/docs/devtools/ai-assistance
If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.
核心概念
浏览器生命周期：首次调用工具时，浏览器会自动启动并使用持久化Chrome配置文件。可通过MCP服务器配置中的CLI参数进行设置：npx chrome-devtools-mcp@latest --help。
页面选择：工具操作基于当前选中的页面。使用listpages查看可用页面，再通过selectpage切换上下文。
元素交互：使用take_snapshot获取包含元素uid的页面结构。每个元素都有唯一的uid用于交互。若未找到元素，请重新获取快照——该元素可能已被移除或页面已发生变化。
工作流程模式
与页面交互前
- 1. 导航：navigatepage或newpage
- 等待：若已知目标内容，使用waitfor确保内容加载完成
- 快照：takesnapshot了解页面结构
- 交互：使用快照中的元素uid执行click、fill等操作
高效数据检索
- - 对大型输出（截图、快照、追踪记录）使用filePath参数
- 通过分页（pageIdx、pageSize）和过滤（types）最小化数据量
- 除非需要更新页面状态，否则在输入操作中设置includeSnapshot: false
工具选择
- - 自动化/交互：takesnapshot（基于文本，速度更快，适合自动化）
- 视觉检查：takescreenshot（当用户需要查看视觉状态时）
- 补充详情：对无障碍树中不包含的数据使用evaluate_script
并行执行
可并行发送多个工具调用，但需保持正确顺序：导航 → 等待 → 快照 → 交互
故障排除
若chrome-devtools-mcp功能不足，请引导用户使用Chrome DevTools界面：
- - https://developer.chrome.com/docs/devtools
- https://developer.chrome.com/docs/devtools/ai-assistance
若启动chrome-devtools-mcp或Chrome时出现错误，请参考：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md
