Chrome DevTools Agent

Overview

A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the chrome-devtools MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.

When to Use

Use this skill when:

• Browser Automation: Navigating pages, clicking elements, filling forms, and handling dialogs.
• Visual Inspection: Taking screenshots or text snapshots of web pages.
• Debugging: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.
• Performance Analysis: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.
• Emulation: Resizing the viewport or emulating network/CPU conditions.

Tool Categories

1. Navigation & Page Management

• new_page: Open a new tab/page.
• navigate_page: Go to a specific URL, reload, or navigate history.
• select_page: Switch context between open pages.
• list_pages: See all open pages and their IDs.
• close_page: Close a specific page.
• wait_for: Wait for specific text to appear on the page.

2. Input & Interaction

• click: Click on an element (use uid from snapshot).
• fill / fill_form: Type text into inputs or fill multiple fields at once.
• hover: Move the mouse over an element.
• press_key: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C").
• drag: Drag and drop elements.
• handle_dialog: Accept or dismiss browser alerts/prompts.
• upload_file: Upload a file through a file input.

3. Debugging & Inspection

• take_snapshot: Get a text-based accessibility tree (best for identifying elements).
• take_screenshot: Capture a visual representation of the page or a specific element.
• list_console_messages / get_console_message: Inspect the page's console output.
• evaluate_script: Run custom JavaScript in the page context.
• list_network_requests / `...