360 Secure SkillHub
360 安全技能中心

Chrome DevTools MCP Skill

该 Skill 通过 uxc 以本地 stdio 端点调用 Chrome DevTools MCP,探测端点与操作 schema 后执行页面导航、DOM/可访问性快照、网络与控制台检查、Lighthouse 与性能追踪;默认 autoConnect 连接本地已开启远程调试的 Chrome,并提供 browserUrl 与 headless isolated 备选,改动页面状态的操作要求先确认。

jolestar
jolestar
热度 69.89
最近更新 2026-05-18 12:27:57
分类:自动化依赖:MCP 服务 / 联网浏览搜索 / 代码执行应用场景:调试排错 / 自动化脚本 / 工作流

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add chrome-devtools-mcp-skill
Metadata
name
chrome-devtools-mcp-skill
description
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.

Chrome DevTools MCP Skill

Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint.

Reuse the uxc skill for generic MCP discovery, daemon reuse, JSON envelope parsing, and error handling.

Prerequisites

  • uxc is installed and available in PATH.
  • npx is available in PATH (Node.js installed).
  • Chrome 144+ is running locally with remote debugging enabled from chrome://inspect/#remote-debugging if you use the default live-browser flow.
  • Network access is available for first-time chrome-devtools-mcp package fetch.

Core Workflow (Chrome DevTools MCP-Specific)

Endpoint candidate inputs before finalizing:

  • Raw package form from official docs:
    • npx chrome-devtools-mcp@latest
  • Reliable non-interactive form:
    • npx -y chrome-devtools-mcp@latest
  • Default live-browser endpoint for this skill:
    • npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics
  • Explicit browser-url endpoint:
    • npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics
  • Fallback isolated endpoint:
    • npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics
  • Running local Chrome auto-connect mode:
    • npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics
  1. Verify protocol/path from official source and probe:
    • Official source:
      • https://github.com/ChromeDevTools/chrome-devtools-mcp
    • probe candidate endpoints with:
      • uxc "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics" -h
    • Confirm protocol is MCP stdio (protocol == "mcp" in envelope).
  2. Detect auth requirement explicitly:
    • Run host help or a minimal read call and inspect envelope.
    • Default local stdio flow requires no OAuth/API key.
    • Existing Chrome attachment requires remote debugging to be enabled separately, but not API auth.
  3. Use a fixed link command by default:
    • command -v chrome-devtools-mcp-cli
    • If missing, create it:
      • uxc link chrome-devtools-mcp-cli "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics"
    • Optional explicit browser-url link:
      • 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"
    • Optional isolated fallback link:
      • 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
  4. Inspect operation schema before execution:
    • chrome-devtools-mcp-cli new_page -h
    • chrome-devtools-mcp-cli take_snapshot -h
    • chrome-devtools-mcp-cli list_network_requests -h
    • chrome-devtools-mcp-cli lighthouse_audit -h
  5. Prefer read-first interaction:
    • Start with new_page, list_pages, take_snapshot, list_network_requests, or list_console_messages.
  6. Confirm before mutating page state:
    • click
    • fill
    • fill_form
    • press_key
    • upload_file
    • evaluate_script
    • handle_dialog

Guardrails

  • Keep automation on the JSON output envelope; do not rely on --text.
  • Use chrome-devtools-mcp-cli as the default command path.
  • Prefer the live-browser default endpoint when you need real logged-in state, current tabs, network diagnostics, console inspection, or performance analysis.
  • Prefer --autoConnect first when browser-side remote debugging is available.
  • Use chrome-devtools-mcp-port only when you intentionally run a Chrome instance with --remote-debugging-port=9222.
  • If no debuggable Chrome is available, fallback to chrome-devtools-mcp-isolated.
  • Prefer take_snapshot over screenshots for model-action loops.
  • Prefer list_network_requests / get_network_request over raw script evaluation when inspecting network behavior.
  • Treat lighthouse_audit, performance_start_trace, and take_memory_snapshot as heavier operations; use them intentionally.
  • Use evaluate_script only when an existing higher-level DevTools tool cannot answer the question.

References

  • Invocation patterns:
    • references/usage-patterns.md