mcp-chrome-devtools
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.
What this skill does
# Chrome DevTools Skill Control Chrome browser programmatically using the Chrome DevTools Protocol. This skill provides 26 tools for browser automation, web scraping, testing, and performance analysis. ## Prerequisites - Node.js 18+ installed - mcp2rest running on http://localhost:28888 - chrome-devtools server loaded in mcp2rest - Package: `chrome-devtools-mcp@latest` - Dependencies installed (already done during generation) ## Quick Start Launch a browser, navigate to a page, and interact with elements: ```bash # 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:** - Page opens in Chrome browser - Snapshot shows page structure with element UIDs - Button is clicked and any action triggers ## Tool Groups This skill provides 26 tools organized into 4 groups: ### 1. Page Management 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 ### 2. Element Interaction 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 ### 3. Inspection & Debugging 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 ### 4. Performance Analysis 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 ## Common Workflows ### Workflow: Automated Form Submission Complete end-to-end form filling and submission: - [ ] **Open page:** `node scripts/new_page.js --url https://example.com/login` - [ ] **Get structure:** `node scripts/take_snapshot.js` (identify UIDs) - [ ] **Fill email:** `node scripts/fill.js --uid email_input_xyz --value [email protected]` - [ ] **Fill password:** `node scripts/fill.js --uid pass_input_abc --value mypassword` - [ ] **Submit form:** `node scripts/click.js --uid submit_btn_def` - [ ] **Verify:** `node scripts/wait_for.js --text "Welcome" --timeout 5000` - [ ] **Capture result:** `node scripts/take_screenshot.js --format png --filePath result.png` **Input 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. ### Workflow: Web Scraping with Network Monitoring Capture page data and network activity: - [ ] **Start monitoring:** `node scripts/new_page.js --url https://example.com/data` - [ ] **Wait for load:** `node scripts/wait_for.js --text "Data loaded" --timeout 10000` - [ ] **Get page snapshot:** `node scripts/take_snapshot.js --verbose true --filePath snapshot.txt` - [ ] **List network calls:** `node scripts/list_network_requests.js --resourceTypes fetch,xhr` - [ ] **Get specific request:** `node scripts/get_network_request.js --reqid request_123` - [ ] **Extract via script:** `node scripts/evaluate_script.js --function "() => document.querySelector('.data').textContent"` **Expected Output:** Page data extracted, network requests logged, specific API responses captured. ### Workflow: Performance Testing Analyze page performance and Core Web Vitals: - [ ] **Open page:** `node scripts/new_page.js --url https://example.com` - [ ] **Start tracing:** `node scripts/performance_start_trace.js --reload true --autoStop false` - [ ] **Wait for page:** `node scripts/wait_for.js --text "Content loaded" --timeout 15000` - [ ] **Stop tracing:** `node scripts/performance_stop_trace.js` - [ ] **Review insights:** Check trace output for performance metrics and CWV scores - [ ] **Analyze specific insight:** `node scripts/performance_analyze_insight.js --insightSetId set_123 --insightName LargestContentfulPaint` **Expected Output:** Performance trace with metrics, CWV scores (LCP, FID, CLS), actionable insights. ### Workflow: Multi-Page Session Management Work with multiple browser tabs: - [ ] **List current pages:** `node scripts/list_pages.js` - [ ] **Open new tab:** `node scripts/new_page.js --url https://example.com/page1` - [ ] **Open another tab:** `node scripts/new_page.js --url https://example.com/page2` - [ ] **List all pages:** `node scripts/list_pages.js` (note page indices) - [ ] **Switch to page 0:** `node scripts/select_page.js --pageIdx 0` - [ ] **Interact with page 0:** `node scripts/take_snapshot.js` - [ ] **Switch to page 1:** `node scripts/select_page.js --pageIdx 1` - [ ] **Close page 1:** `node scripts/close_page.js --pageIdx 1` **Expected Output:** Multiple tabs managed, context switching works, specific pages closed. ## State Persistence This server maintains state between script calls: - Browser instance stays open across multiple commands - Page context persists until explicitly changed with `select_page.js` - Console messages and network requests accumulate since last navigation - State resets when mcp2rest server restarts ## Reference - **Complete tool listing:** @reference/all-tools.md - **Troubleshooting guide:** @reference/troubleshooting.md - **Advanced examples:** @reference/advanced-examples.md ## Quick Tips 1. **Always take snapshots first:** Use `take_snapshot.js` to get element UIDs before interaction 2. **Use wait_for for dynamic content:** Don't assume instant loading 3. **Handle dialogs proactively:** Use `handle_dialog.js` if alerts/confirms appear 4. **Check console for errors:** Use `list_console_messages.js` to debug issues 5. **Monitor network for API calls:** Use `list_network_requests.js` to track backend communication
Related in AI Agents
skill-development
IncludedComprehensive meta-skill for creating, managing, validating, auditing, and distributing Claude Code skills and slash commands (unified in v2.1.3+). Provides skill templates, creation workflows, validation patterns, audit checklists, naming conventions, YAML frontmatter guidance, progressive disclosure examples, and best practices lookup. Use when creating new skills, validating existing skills, auditing skill quality, understanding skill architecture, needing skill templates, learning about YAML frontmatter requirements, progressive disclosure patterns, tool restrictions (allowed-tools), skill composition, skill naming conventions, troubleshooting skill activation issues, creating custom slash commands, configuring command frontmatter, using command arguments ($ARGUMENTS, $1, $2), bash execution in commands, file references in commands, command namespacing, plugin commands, MCP slash commands, Skill tool configuration, or deciding between skills vs slash commands. Delegates to docs-management skill for official documentation.
reprompter
IncludedTransform messy prompts into well-structured, effective prompts — single or multi-agent. Use when: "reprompt", "reprompt this", "clean up this prompt", "structure my prompt", rough text needing XML tags and best practices, "reprompter teams", "repromptception", "run with quality", "smart run", "smart agents", multi-agent tasks, audits, parallel work, anything going to agent teams. Don't use when: simple Q&A, pure chat, immediate execution-only tasks. See "Don't Use When" section for details. Outputs: Structured XML/Markdown prompt, quality score (before/after), optional team brief + per-agent sub-prompts, agent team output files. Success criteria: Single mode quality score ≥ 7/10; Repromptception per-agent prompt quality score 8+/10; all required sections present, actionable and specific.
adaptive-compaction
IncludedAdaptive add-on policy and recovery layer that decides WHEN to compact, prune, snapshot, or fork -- replacing fixed-percent auto-compaction across Claude Code, Codex, and MCP-capable hosts. Trigger on auto-compact timing or damage: "when should I compact", "is it safe to compact now or start a fresh session", "auto-compact fires too early/mid-task", "switching to an unrelated task but the window still has space", "context rot", "answers get worse the longer the session runs", "the agent forgot the plan or my decisions after it summarized", "add a layer on top that manages context without changing the agent", raising autoCompactWindow to give the policy room, or installing/tuning a cross-tool compaction policy or PreCompact hook -- even when "compaction" is never said but the problem is context-window pressure or post-summarization memory loss. Do NOT use to summarize a conversation, build RAG, write a summarization prompt (decides WHEN not HOW), or answer max-context-length trivia.
agent-skill-creator
IncludedCreate cross-platform agent skills from workflow descriptions. Activates when users ask to create an agent, automate a repetitive workflow, create a custom skill, or need advanced agent creation. Triggers on phrases like create agent for, automate workflow, create skill for, every day I have to, daily I need to, turn process into agent, need to automate, create a cross-platform skill, validate this skill, export this skill, migrate this skill. Supports single skills, multi-agent suites, transcript processing, template-based creation, interactive configuration, cross-platform export, and spec validation.
llm-wiki
IncludedUse when building or maintaining a persistent personal knowledge base (second brain) in Obsidian where an LLM incrementally ingests sources, updates entity/concept pages, maintains cross-references, and keeps a synthesis current. Triggers include "second brain", "Obsidian wiki", "personal knowledge management", "ingest this paper/article/book", "build a research wiki", "compound knowledge", "Memex", or whenever the user wants knowledge to accumulate across sessions instead of being re-derived by RAG on every query.
skill-master
IncludedAgent Skills authoring, evaluation, and optimization. Create, edit, validate, benchmark, and improve skills following the agentskills.io specification. Use when designing SKILL.md files, structuring skill folders (references, scripts, assets), ingesting external documentation into skills, running trigger evals, benchmarking skill quality, optimizing descriptions, or performing blind A/B comparisons. Keywords: agentskills.io, SKILL.md, skill authoring, eval, benchmark, trigger optimization.