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。
