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.