Automate Chrome browser via DevTools Protocol. Navigate pages, interact with elements, inspect network/console, analyze performance, and capture screenshots for web testing and automation tasks.
Automate Chrome browser via DevTools Protocol for web testing and scraping. Use when you need to navigate pages, interact with elements, inspect network/console logs, analyze performance, or capture screenshots.
/plugin marketplace add ulasbilgen/mcp-skills-plugins/plugin install chrome-devtools-plugin@mcp-skills-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
reference/advanced-examples.mdreference/all-tools.mdreference/troubleshooting.mdscripts/click.jsscripts/close_page.jsscripts/drag.jsscripts/emulate.jsscripts/evaluate_script.jsscripts/fill.jsscripts/fill_form.jsscripts/get_console_message.jsscripts/get_network_request.jsscripts/handle_dialog.jsscripts/hover.jsscripts/list_console_messages.jsscripts/list_network_requests.jsscripts/list_pages.jsscripts/mcp_client.jsscripts/navigate_page.jsscripts/new_page.jsControl Chrome browser programmatically using the Chrome DevTools Protocol. This skill provides 26 tools for browser automation, web scraping, testing, and performance analysis.
chrome-devtools-mcp@latestLaunch a browser, navigate to a page, and interact with elements:
# 1. Open a new page
node scripts/new_page.js --url https://example.com
# 2. Take a text snapshot to identify elements
node scripts/take_snapshot.js
# 3. Click a button (use UID from snapshot output)
node scripts/click.js --uid button_submit_abc123
Expected Output:
This skill provides 26 tools organized into 4 groups:
Browser window and tab operations: creating pages, navigation, switching contexts.
Tools: new_page, list_pages, close_page, navigate_page, select_page, resize_page
See: @workflows/page-management.md for detailed workflows
User input simulation: clicking, typing, form filling, drag & drop.
Tools: click, fill, fill_form, hover, drag, upload_file, press_key
See: @workflows/element-interaction.md for detailed workflows
Monitoring and debugging: snapshots, screenshots, console logs, network requests.
Tools: take_snapshot, take_screenshot, list_console_messages, get_console_message, list_network_requests, get_network_request
See: @workflows/inspection-debugging.md for detailed workflows
Scripting and performance tools: JavaScript execution, performance tracing, device emulation.
Tools: evaluate_script, wait_for, handle_dialog, emulate, performance_start_trace, performance_stop_trace, performance_analyze_insight
See: @workflows/performance-analysis.md for detailed workflows
Complete end-to-end form filling and submission:
node scripts/new_page.js --url https://example.com/loginnode scripts/take_snapshot.js (identify UIDs)node scripts/fill.js --uid email_input_xyz --value test@example.comnode scripts/fill.js --uid pass_input_abc --value mypasswordnode scripts/click.js --uid submit_btn_defnode scripts/wait_for.js --text "Welcome" --timeout 5000node scripts/take_screenshot.js --format png --filePath result.pngInput Example:
Email field UID: input_email_1a2b3c
Password field UID: input_password_4d5e6f
Submit button UID: button_submit_7g8h9i
Expected Output: Form submitted successfully, redirected to dashboard, screenshot saved.
Capture page data and network activity:
node scripts/new_page.js --url https://example.com/datanode scripts/wait_for.js --text "Data loaded" --timeout 10000node scripts/take_snapshot.js --verbose true --filePath snapshot.txtnode scripts/list_network_requests.js --resourceTypes fetch,xhrnode scripts/get_network_request.js --reqid request_123node scripts/evaluate_script.js --function "() => document.querySelector('.data').textContent"Expected Output: Page data extracted, network requests logged, specific API responses captured.
Analyze page performance and Core Web Vitals:
node scripts/new_page.js --url https://example.comnode scripts/performance_start_trace.js --reload true --autoStop falsenode scripts/wait_for.js --text "Content loaded" --timeout 15000node scripts/performance_stop_trace.jsnode scripts/performance_analyze_insight.js --insightSetId set_123 --insightName LargestContentfulPaintExpected Output: Performance trace with metrics, CWV scores (LCP, FID, CLS), actionable insights.
Work with multiple browser tabs:
node scripts/list_pages.jsnode scripts/new_page.js --url https://example.com/page1node scripts/new_page.js --url https://example.com/page2node scripts/list_pages.js (note page indices)node scripts/select_page.js --pageIdx 0node scripts/take_snapshot.jsnode scripts/select_page.js --pageIdx 1node scripts/close_page.js --pageIdx 1Expected Output: Multiple tabs managed, context switching works, specific pages closed.
This server maintains state between script calls:
select_page.jstake_snapshot.js to get element UIDs before interactionhandle_dialog.js if alerts/confirms appearlist_console_messages.js to debug issueslist_network_requests.js to track backend communicationThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.