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

  /

  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.