← 返回 Skills 市场

Chrome Devtools Mcp

Name: Chrome Devtools Mcp
Author: aiwithabidi

作者 aiwithabidi · GitHub ↗ · v1.0.0

cross-platform ⚠ suspicious

2467

总下载

当前安装

版本数

在 OpenClaw 中安装

/install chrome-devtools-mcp

功能描述

Chrome DevTools MCP — Google's official browser automation and testing server. Control Chrome via Puppeteer through MCP protocol: click, fill forms, navigate...

使用说明 (SKILL.md)

🌐 Chrome DevTools MCP

Google's official Chrome DevTools MCP server — gives AI agents full control of a live Chrome browser via Puppeteer and the Chrome DevTools Protocol.

Features

Input automation — click, drag, fill forms, hover, press keys, upload files, handle dialogs
Navigation — open/close/switch pages, wait for elements/network idle
Screenshots & snapshots — capture page state visually and as DOM
Performance traces — record and analyze Chrome performance traces with insights
Network inspection — list/inspect network requests and responses
Console debugging — read console messages with source-mapped stack traces
Device emulation — emulate mobile devices, resize viewport
Form automation — fill multiple form fields at once

Requirements

Node.js v20.19+ (already available in OpenClaw)
Chrome/Chromium browser

Quick Start

Install & verify

npx -y chrome-devtools-mcp@latest --help

Start the MCP server

# Standard (launches Chrome automatically)
npx -y chrome-devtools-mcp@latest

# Headless mode (for servers)
npx -y chrome-devtools-mcp@latest --headless

# Connect to existing Chrome (must be started with --remote-debugging-port=9222)
npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222

# Disable telemetry
npx -y chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

OpenClaw MCP Integration

Add to your openclaw.json under MCP servers:

{
  "mcp": {
    "servers": {
      "chrome-devtools": {
        "command": "npx",
        "args": ["-y", "chrome-devtools-mcp@latest", "--headless", "--no-usage-statistics"]
      }
    }
  }
}

Or use the setup script:

python3 {baseDir}/scripts/setup_chrome_mcp.py setup
python3 {baseDir}/scripts/setup_chrome_mcp.py status
python3 {baseDir}/scripts/setup_chrome_mcp.py test

Tool Reference

Input Automation (8 tools)

Tool	Description	Key Params
`click`	Click an element	`uid` (required), `dblClick`
`drag`	Drag element onto another	`from_uid`, `to_uid`
`fill`	Type text into input/textarea/select	`uid`, `value`
`fill_form`	Fill multiple form elements at once	`elements[]`
`handle_dialog`	Accept/dismiss browser dialogs	`action` (accept/dismiss)
`hover`	Hover over element	`uid`
`press_key`	Press keyboard key	`key`
`upload_file`	Upload file to input	`uid`, `paths[]`

Navigation (6 tools)

Tool	Description	Key Params
`navigate_page`	Go to URL	`url`
`new_page`	Open new tab	`url`
`close_page`	Close current tab	—
`list_pages`	List all open tabs	—
`select_page`	Switch to tab	`index`
`wait_for`	Wait for element/network	`event`, `uid`, `timeout`

Debugging (5 tools)

Tool	Description
`take_screenshot`	Capture page as image
`take_snapshot`	Get DOM/accessibility snapshot
`evaluate_script`	Run JavaScript in page
`list_console_messages`	Get console log entries
`get_console_message`	Get specific console message

Performance (3 tools)

Tool	Description
`performance_start_trace`	Begin performance recording
`performance_stop_trace`	Stop and get trace data
`performance_analyze_insight`	AI analysis of trace

Network (2 tools)

Tool	Description
`list_network_requests`	List all network requests
`get_network_request`	Get request/response details

Emulation (2 tools)

Tool	Description
`emulate`	Emulate device (mobile, tablet)
`resize_page`	Change viewport size

Common Workflows

Test a webpage

navigate_page → URL
take_snapshot → get element UIDs
click/fill → interact with elements
take_screenshot → capture result

Performance audit

navigate_page → URL
performance_start_trace
Interact with page
performance_stop_trace
performance_analyze_insight

Form testing

navigate_page → form URL
take_snapshot → identify form fields
fill_form → fill all fields at once
click → submit button
take_screenshot → verify result

Privacy Notes

Google collects usage statistics by default — disable with --no-usage-statistics
Performance tools may send trace URLs to Google CrUX API — disable with --no-performance-crux
Avoid sharing sensitive data in browser sessions

安全使用建议

This skill appears to do what it says: start and test a Chrome DevTools MCP server via the chrome-devtools-mcp npm package. Before installing or enabling it, consider: 1) npx -y chrome-devtools-mcp@latest fetches and runs code from the npm registry at runtime — pin a specific version (not @latest) if you want reproducibility and lower supply-chain risk. 2) The MCP server can control a browser and access any page you visit; avoid exposing sensitive pages or credentials to automated sessions. 3) The SKILL.md documents telemetry (Google usage statistics / CrUX) and provides flags to disable them — use those flags if you want to avoid sending traces. 4) If you need higher assurance, review the npm package and its GitHub repo (homepage) and run the setup/test commands in an isolated environment first.

功能分析

Type: OpenClaw Skill Name: chrome-devtools-mcp Version: 1.0.0 The skill bundle is classified as suspicious primarily due to the use of `subprocess.run(shell=True)` in the `run` helper function within `scripts/setup_chrome_mcp.py`. While the commands passed to it are currently hardcoded and appear safe, this pattern introduces a shell injection vulnerability if any part of the command were to be derived from untrusted input in the future. Additionally, the `SKILL.md` documents powerful capabilities like `evaluate_script` which allows arbitrary JavaScript execution in the browser, a high-risk feature, though it is explicitly stated and central to the skill's purpose of browser automation.

能力评估

✓ Purpose & Capability

The name/description (Chrome DevTools MCP) aligns with the declared requirements and instructions: Node.js and Chrome/Chromium are the expected dependencies, and the SKILL.md and setup script all center on starting/configuring the MCP server. No unrelated credentials, binaries, or system paths are requested.

✓ Instruction Scope

SKILL.md describes only browser automation operations and how to start the MCP server. The included setup script checks for node/npx/Chrome, pre-caches the npm package, prints an openclaw.json snippet, checks ~/.openclaw/openclaw.json for configuration, and can start a headless MCP server for a quick test. It does not attempt to read unrelated files or request secrets.

ℹ Install Mechanism

There is no formal install spec; instructions rely on npx to fetch and run chrome-devtools-mcp@latest from the npm registry. Using npx @latest is a normal way to run CLI tools but means remote code is fetched at runtime (unpinned). This is a supply-chain risk: if the npm package is compromised or a different package is published under the same name, arbitrary code could run. The package homepage points to an official ChromeDevTools repo, which mitigates concern but does not eliminate the live-download risk.

✓ Credentials

The skill requests no environment variables, no credentials, and only references a local config path (~/.openclaw/openclaw.json) for verifying/printing MCP config. The setup script's accesses are proportional to its stated purpose (setup/status/test).

✓ Persistence & Privilege

The skill is not always-enabled, does not request elevated privileges, and does not modify other skills or system-wide settings. The setup script prints configuration for openclaw.json but does not write to system files by itself. The test command launches an MCP server process (expected behavior).

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install chrome-devtools-mcp
安装完成后，直接呼叫该 Skill 的名称或使用 /chrome-devtools-mcp 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v1.0.0

Initial release of Chrome DevTools MCP. - Control a live Chrome browser with Puppeteer and the Chrome DevTools Protocol. - Automate clicks, form filling, navigation, and handle browser dialogs. - Capture screenshots, DOM snapshots, and run JavaScript in the page. - Record and analyze performance traces, inspect network requests, and review console messages. - Emulate mobile devices and resize the viewport for testing. - Designed for web automation, browser testing, performance analysis, and visual regression use cases.

元数据

Slug chrome-devtools-mcp

版本 1.0.0

许可证 —

累计安装 31

当前安装数 29

历史版本数 1

常见问题