Skip to content

README.md

Latest commit

 

History

History
55 lines (37 loc) · 1.99 KB

README.md

File metadata and controls

55 lines (37 loc) · 1.99 KB
Raw

Chrome DevTools Skill

Claude Code skills for browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization — powered by the chrome-devtools CLI.

No MCP server needed. All commands run via chrome-devtools <tool> [args] in the shell.

Skills

Skill Description
chrome-devtools Core browser debugging, automation, screenshots, and page inspection
a11y-debugging Accessibility auditing based on web.dev guidelines
debug-optimize-lcp Largest Contentful Paint debugging and optimization
chrome-devtools-troubleshooting Connection and configuration diagnostics

Installation

Prerequisites

npm i chrome-devtools-mcp@latest -g   # Install the CLI
chrome-devtools status                 # Verify it works

Requires Node.js v20.19+ and Chrome stable.

Copy Skills

cp -r skills/* ~/.claude/skills/

As a Claude Code Plugin

/plugin marketplace add ddfourtwo/chrome-devtools-skill
/plugin install chrome-devtools-skill

29 CLI Commands

The chrome-devtools CLI provides:

  • Input automation (9): click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file
  • Navigation (6): close_page, list_pages, navigate_page, new_page, select_page, wait_for
  • Emulation (2): emulate, resize_page
  • Performance (4): performance_analyze_insight, performance_start_trace, performance_stop_trace, take_memory_snapshot
  • Network (2): get_network_request, list_network_requests
  • Debugging (6): evaluate_script, get_console_message, lighthouse_audit, list_console_messages, take_screenshot, take_snapshot

Run chrome-devtools <command> --help for details on any command.

License

Skills content derived from ChromeDevTools/chrome-devtools-mcp under Apache-2.0.