chrome-devtools

tuantiensiu's avatarfrom tuantiensiu

Chrome DevTools for debugging, performance analysis, and browser automation. Use when debugging web apps, analyzing performance, inspecting network requests, or automating browser interactions.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Web Automation]

When & Why to Use This Skill

The Chrome DevTools skill enables Claude to interact with and inspect live Chrome browser instances via the Chrome DevTools Protocol. It provides a comprehensive suite of tools for browser automation, web application debugging, and performance analysis, allowing users to programmatically navigate pages, manipulate UI elements, and capture visual snapshots for robust web testing and data extraction.

Use Cases

  • Automated End-to-End Testing: Simulate user journeys by clicking elements, filling forms, and verifying page states to ensure web application reliability.
  • Web Performance Analysis: Use script evaluation and network inspection capabilities to identify bottlenecks and optimize page load speeds.
  • Visual Regression Testing: Capture high-quality screenshots of specific components or full pages to detect UI inconsistencies across different deployments.
  • Dynamic Content Extraction: Navigate complex single-page applications (SPAs) and use accessibility tree snapshots to accurately locate and scrape data from dynamic elements.
  • Frontend Debugging: Inspect the DOM, monitor network requests, and execute custom JavaScript in the browser context to troubleshoot client-side issues.
namechrome-devtools
descriptionChrome DevTools for debugging, performance analysis, and browser automation. Use when debugging web apps, analyzing performance, inspecting network requests, or automating browser interactions.

Chrome DevTools (MCP)

Control and inspect a live Chrome browser via Chrome DevTools Protocol.

Available Tools

  • take_snapshot - Get accessibility tree snapshot with element UIDs
  • take_screenshot - Capture screenshot of page or element
  • navigate_page - Navigate to URL, back, forward, or reload
  • new_page - Open a new browser tab
  • list_pages - List all open pages/tabs
  • click - Click element by UID
  • fill - Type text into element
  • hover - Hover over element
  • press_key - Press keyboard key (Enter, Tab, etc.)
  • evaluate_script - Run JavaScript in page context
  • wait_for - Wait for text to appear

Workflow

  1. Snapshot the page using take_snapshot to get element UIDs
  2. Navigate to target URL using navigate_page
  3. Interact using click, fill, hover with UIDs from snapshot
  4. Screenshot to capture results using take_screenshot

Quick Start

# Get page structure with element UIDs
skill_mcp(skill_name="chrome-devtools", tool_name="take_snapshot")

# Navigate to URL
skill_mcp(skill_name="chrome-devtools", tool_name="navigate_page", arguments='{"type": "url", "url": "https://example.com"}')

# Click element (use UID from snapshot)
skill_mcp(skill_name="chrome-devtools", tool_name="click", arguments='{"uid": "e123"}')

# Fill input field
skill_mcp(skill_name="chrome-devtools", tool_name="fill", arguments='{"uid": "e456", "value": "hello"}')

# Take screenshot
skill_mcp(skill_name="chrome-devtools", tool_name="take_screenshot")

Tips

  • Always take_snapshot first to get element UIDs
  • Element UIDs change after navigation - take fresh snapshot
  • Use wait_for after actions that trigger page changes
  • Use evaluate_script for custom JS when tools don't cover your need

vs Playwright

Feature chrome-devtools playwright
Browser support Chrome only Chrome, FF, WebKit
Performance tracing ✅ (full MCP has it) ❌
Network inspection ✅ (full MCP has it) ❌
Cross-browser ❌ ✅

Note: This skill loads 11 essential tools. For full 26+ tools (performance, network, console), modify mcp.json to remove includeTools filter.