chrome-devtoolslisted

# 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. -