This source did not publish a separate summary. Review SKILL.md before using the skill.
SKILL.md
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.
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.
: Accept or dismiss browser alerts/prompts.
handle_dialog
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 / get_network_request: Analyze network traffic and request details.
4. Emulation & Performance
resize_page: Change the viewport dimensions.
emulate: Throttling CPU/Network or emulating geolocation.
performance_start_trace: Start recording a performance profile.
performance_stop_trace: Stop recording and save the trace.
performance_analyze_insight: Get detailed analysis from recorded performance data.
Workflow Patterns
Pattern A: Identifying Elements (Snapshot-First)
Always prefer take_snapshot over take_screenshot for finding elements. The snapshot provides uid values which are required by interaction tools.
1. `take_snapshot` to get the current page structure.
2. Find the `uid` of the target element.
3. Use `click(uid=...)` or `fill(uid=..., value=...)`.
Pattern B: Troubleshooting Errors
When a page is failing, check both console logs and network requests.
1. `list_console_messages` to check for JavaScript errors.
2. `list_network_requests` to identify failed (4xx/5xx) resources.
3. `evaluate_script` to check the value of specific DOM elements or global variables.
Pattern C: Performance Profiling
Identify why a page is slow.
1. `performance_start_trace(reload=true, autoStop=true)`
2. Wait for the page to load/trace to finish.
3. `performance_analyze_insight` to find LCP issues or layout shifts.
Best Practices
Context Awareness: Always run list_pages and select_page if you are unsure which tab is currently active.
Snapshots: Take a new snapshot after any major navigation or DOM change, as uid values may change.
Timeouts: Use reasonable timeouts for wait_for to avoid hanging on slow-loading elements.
Screenshots: Use take_screenshot sparingly for visual verification, but rely on take_snapshot for logic.
