Chrome Devtools
/install chrome-devtools
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
- Navigate:
navigate_pageornew_page - Wait:
wait_forto ensure content is loaded if you know what you look for. - Snapshot:
take_snapshotto understand page structure - Interact: Use element
uids from snapshot forclick,fill, etc.
Efficient data retrieval
- Use
filePathparameter for large outputs (screenshots, snapshots, traces) - Use pagination (
pageIdx,pageSize) and filtering (types) to minimize data - Set
includeSnapshot: falseon 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_scriptfor 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:
If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.
- 确保已安装 OpenClaw(本地或 Docker 部署)
- 在对话框中输入安装命令:
/install chrome-devtools - 安装完成后,直接呼叫该 Skill 的名称或使用
/chrome-devtools触发 - 根据 Skill 的参数说明提供必要输入,即可获得结构化输出
Chrome Devtools 是什么?
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions,... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件,目前累计下载 2270 次。
如何安装 Chrome Devtools?
在 OpenClaw 或 Claude Code 对话框中运行命令「/install chrome-devtools」即可一键安装,无需额外配置。
Chrome Devtools 是免费的吗?
是的,Chrome Devtools 完全免费(开源免费),可自由下载、安装和使用。
Chrome Devtools 支持哪些平台?
Chrome Devtools 跨平台运行,可在任意部署了 OpenClaw / Claude Code 的环境中使用(cross-platform)。
谁开发了 Chrome Devtools?
由 podcasting101(@podcasting101)开发并维护,当前版本 v0.1.1。