chrome-devtools-mcp-skill — for Claude Code chrome-devtools-mcp-skill, json-engine, community, for Claude Code, ide skills, chrome-devtools-mcp, npx chrome-devtools-mcp@latest, npx -y chrome-devtools-mcp@latest, Explicit browser-url endpoint, Fallback isolated endpoint

v1.0.0

À propos de ce Skill

Scenario recommande: Ideal for AI agents that need chrome devtools mcp skill. Resume localise: # Chrome DevTools MCP Skill Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

Fonctionnalités

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
uxc is installed and available in PATH.
npx is available in PATH (Node.js installed).

# Sujets clés

linfeng184509 linfeng184509
[0]
[0]
Mis à jour: 4/15/2026

Skill Overview

Start with fit, limitations, and setup before diving into the repository.

Scenario recommande: Ideal for AI agents that need chrome devtools mcp skill. Resume localise: # Chrome DevTools MCP Skill Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

Pourquoi utiliser cette compétence

Recommandation: chrome-devtools-mcp-skill helps agents chrome devtools mcp skill. Chrome DevTools MCP Skill Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint. This AI agent

Meilleur pour

Scenario recommande: Ideal for AI agents that need chrome devtools mcp skill.

Cas d'utilisation exploitables for chrome-devtools-mcp-skill

Cas d'usage: Chrome DevTools MCP Skill
Cas d'usage: Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint
Cas d'usage: Reuse the uxc skill for generic MCP discovery, daemon reuse, JSON envelope parsing, and error

! Sécurité et Limitations

  • Limitation: Default local stdio flow requires no OAuth/API key.
  • Limitation: Existing Chrome attachment requires remote debugging to be enabled separately, but not API auth.
  • Limitation: Default local stdio flow requires no OAuth/API key

About The Source

The section below is adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.

Démo Labs

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ et étapes d’installation

These questions and steps mirror the structured data on this page for better search understanding.

? Questions fréquentes

Qu’est-ce que chrome-devtools-mcp-skill ?

Scenario recommande: Ideal for AI agents that need chrome devtools mcp skill. Resume localise: # Chrome DevTools MCP Skill Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

Comment installer chrome-devtools-mcp-skill ?

Exécutez la commande : npx killer-skills add linfeng184509/json-engine/chrome-devtools-mcp-skill. Elle fonctionne avec Cursor, Windsurf, VS Code, Claude Code et plus de 19 autres IDE.

Quels sont les cas d’usage de chrome-devtools-mcp-skill ?

Les principaux cas d’usage incluent : Cas d'usage: Chrome DevTools MCP Skill, Cas d'usage: Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint, Cas d'usage: Reuse the uxc skill for generic MCP discovery, daemon reuse, JSON envelope parsing, and error.

Quels IDE sont compatibles avec chrome-devtools-mcp-skill ?

Cette skill est compatible avec Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Utilisez la CLI Killer-Skills pour une installation unifiée.

Y a-t-il des limites pour chrome-devtools-mcp-skill ?

Limitation: Default local stdio flow requires no OAuth/API key.. Limitation: Existing Chrome attachment requires remote debugging to be enabled separately, but not API auth.. Limitation: Default local stdio flow requires no OAuth/API key.

Comment installer ce skill

  1. 1. Ouvrir le terminal

    Ouvrez le terminal ou la ligne de commande dans le dossier du projet.

  2. 2. Lancer la commande d’installation

    Exécutez : npx killer-skills add linfeng184509/json-engine/chrome-devtools-mcp-skill. La CLI détectera automatiquement votre IDE ou votre agent et configurera la skill.

  3. 3. Commencer à utiliser le skill

    Le skill est maintenant actif. Votre agent IA peut utiliser chrome-devtools-mcp-skill immédiatement dans le projet.

! Source Notes

This page is still useful for installation and source reference. Before using it, compare the fit, limitations, and upstream repository notes above.

Upstream Repository Material

The section below is adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.

Upstream Source

chrome-devtools-mcp-skill

# Chrome DevTools MCP Skill Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint. This AI agent skill supports Claude

SKILL.md
Readonly
Upstream Repository Material
The section below is adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.
Upstream Source

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

Compétences associées

Looking for an alternative to chrome-devtools-mcp-skill or another community skill for your workflow? Explore these related open-source skills.

Voir tout

openclaw-release-maintainer

Logo of openclaw
openclaw

Resume localise: 🦞 # OpenClaw Release Maintainer Use this skill for release and publish-time workflow. It covers ai, assistant, crustacean workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

widget-generator

Logo of f
f

Resume localise: Generate customizable widget plugins for the prompts.chat feed system # Widget Generator Skill This skill guides creation of widget plugins for prompts.chat. It covers ai, artificial-intelligence, awesome-list workflows. This AI agent skill supports Claude Code, Cursor, and

flags

Logo of vercel
vercel

Resume localise: The React Framework # Feature Flags Use this skill when adding or changing framework feature flags in Next.js internals. It covers blog, browser, compiler workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

138.4k
0
Navigateur

pr-review

Logo of pytorch
pytorch

Resume localise: Usage Modes No Argument If the user invokes /pr-review with no arguments, do not perform a review. It covers autograd, deep-learning, gpu workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

98.6k
0
Développeur