返回顶部
c

chrome-devtools-mcp-skillChrome开发者工具

Use Chrome DevTools MCP through UXC over local stdio for page navigation, DOM/a11y snapshots, network inspection, console inspection, and performance tooling, with a live-browser autoConnect default and optional browserUrl or isolated fallback modes.

作者: admin | 来源: ClawHub
源自
ClawHub
版本
V 1.0.0
安全检测
已通过
197
下载量
免费
免费
0
收藏
概述
安装方式
版本历史

chrome-devtools-mcp-skill

Chrome DevTools MCP 技能

使用此技能通过固定 stdio 端点运行 uxc 的 Chrome DevTools MCP 操作。

复用 uxc 技能进行通用 MCP 发现、守护进程复用、JSON 信封解析和错误处理。

前提条件

  • - uxc 已安装并位于 PATH 中。
  • npx 已安装并位于 PATH 中(已安装 Node.js)。
  • 如果使用默认的实时浏览器流程,Chrome 144+ 需在本地运行,并从 chrome://inspect/#remote-debugging 启用远程调试。
  • 首次获取 chrome-devtools-mcp 包时需要网络访问。

核心工作流(Chrome DevTools MCP 专用)

在最终确定前的端点候选输入:

  • - 官方文档中的原始包形式:

- npx chrome-devtools-mcp@latest
  • - 可靠的非交互形式:

- npx -y chrome-devtools-mcp@latest
  • - 此技能的默认实时浏览器端点:

- npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics
  • - 显式浏览器 URL 端点:

- npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics
  • - 备用隔离端点:

- npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics
  • - 运行本地 Chrome 自动连接模式:

- npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics

  1. 1. 从官方来源验证协议/路径并进行探测:
- 官方来源: - https://github.com/ChromeDevTools/chrome-devtools-mcp - 使用以下命令探测候选端点: - uxc npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics -h - 确认协议为 MCP stdio(信封中 protocol == mcp)。
  1. 2. 显式检测认证需求:
- 运行主机帮助或最小读取调用并检查信封。 - 默认本地 stdio 流程无需 OAuth/API 密钥。 - 现有 Chrome 附加需要单独启用远程调试,但不需要 API 认证。
  1. 3. 默认使用固定链接命令:
- command -v chrome-devtools-mcp-cli - 如果缺失,则创建: - uxc link chrome-devtools-mcp-cli npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics - 可选的显式浏览器 URL 链接: - command -v chrome-devtools-mcp-port - uxc link chrome-devtools-mcp-port npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics - 可选的隔离备用链接: - command -v chrome-devtools-mcp-isolated - uxc link chrome-devtools-mcp-isolated npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics - chrome-devtools-mcp-cli -h
  1. 4. 在执行前检查操作模式:
- chrome-devtools-mcp-cli new_page -h - chrome-devtools-mcp-cli take_snapshot -h - chrome-devtools-mcp-cli listnetworkrequests -h - chrome-devtools-mcp-cli lighthouse_audit -h
  1. 5. 优先使用先读后交互:
- 从 newpage、listpages、takesnapshot、listnetworkrequests 或 listconsole_messages 开始。
  1. 6. 在修改页面状态前确认:
- click - fill - fill_form - press_key - upload_file - evaluate_script - handle_dialog

防护措施

  • - 保持自动化在 JSON 输出信封上;不要依赖 --text。
  • 使用 chrome-devtools-mcp-cli 作为默认命令路径。
  • 当需要真实的登录状态、当前标签页、网络诊断、控制台检查或性能分析时,优先使用实时浏览器默认端点。
  • 当浏览器端远程调试可用时,优先使用 --autoConnect。
  • 仅在有意运行带有 --remote-debugging-port=9222 的 Chrome 实例时使用 chrome-devtools-mcp-port。
  • 如果没有可调试的 Chrome,则回退到 chrome-devtools-mcp-isolated。
  • 在模型-动作循环中,优先使用 takesnapshot 而非截图。
  • 在检查网络行为时,优先使用 listnetworkrequests / getnetworkrequest 而非原始脚本评估。
  • 将 lighthouseaudit、performancestarttrace 和 takememorysnapshot 视为较重操作;有目的地使用它们。
  • 仅在现有高级 DevTools 工具无法回答问题时使用 evaluate_script。

参考

  • - 调用模式:
- references/usage-patterns.md

标签

skill ai

通过对话安装

该技能支持在以下平台通过对话安装:

OpenClaw WorkBuddy QClaw Kimi Claude

方式一:安装 SkillHub 和技能

帮我安装 SkillHub 和 chrome-devtools-mcp-skill-1776358383 技能

方式二:设置 SkillHub 为优先技能安装源

设置 SkillHub 为我的优先技能安装源,然后帮我安装 chrome-devtools-mcp-skill-1776358383 技能

通过命令行安装

skillhub install chrome-devtools-mcp-skill-1776358383

下载

⬇ 下载 chrome-devtools-mcp-skill v1.0.0(免费)

文件大小: 5.22 KB | 发布时间: 2026-4-17 14:20

v1.0.0 最新 2026-4-17 14:20
Initial release of chrome-devtools-mcp-skill, enabling Chrome DevTools MCP via UXC and local stdio.

- Supports page navigation, DOM/a11y snapshots, network and console inspection, and performance tooling by default.
- Uses `npx` and `chrome-devtools-mcp` with live-browser autoConnect as the recommended workflow.
- Provides fallback modes for browser URL targeting and isolated headless operation.
- Reuses generic UXC procedures for MCP discovery, linking commands, and JSON envelope parsing.
- Includes detailed workflow steps, guardrails, and references for safe usage.

Archiver·手机版·闲社网·闲社论坛·羊毛社区· 多链控股集团有限公司 · 苏ICP备2025199260号-1

Powered by Discuz! X5.0   © 2024-2025 闲社网·线报更新论坛·羊毛分享社区·http://xianshe.com

p2p_official_large
返回顶部