Awesome-omni-skill chrome-devtools

What I do

• Automate browser interactions through Chrome DevTools Protocol
• Navigate pages, click elements, fill forms, and handle user interactions
• Debug issues by capturing console logs and network requests
• Take screenshots and snapshots for visual regression testing
• Record performance traces and analyze Core Web Vitals
• Emulate different devices, network conditions, and geolocations
• Execute JavaScript in the browser context for advanced debugging

When to use me

Use me when you need to:

• Automate browser testing and interaction flows
• Debug frontend issues by examining console output and network activity
• Capture screenshots for documentation or regression testing
• Analyze page performance with performance traces
• Test responsive designs with device emulation
• Inspect and interact with page elements programmatically
• Debug WebSocket or network request failures
• Verify page behavior across different network conditions

Page management

// List all open pages
chrome-devtools_list_pages()

// Select a page by ID
chrome-devtools_select_page({ pageId: 0 })

// Navigate to URL
chrome-devtools_navigate_page({ type: "url", url: "https://example.com" })

// Navigate back/forward/reload
chrome-devtools_navigate_page({ type: "back" })
chrome-devtools_navigate_page({ type: "forward" })
chrome-devtools_navigate_page({ type: "reload", ignoreCache: true })

// Create new page
chrome-devtools_new_page({ url: "https://example.com" })

// Close a page (except the last one)
chrome-devtools_close_page({ pageId: 1 })

Page interaction

// Take snapshot of page elements
const snapshot = chrome-devtools_take_snapshot()
// Returns elements with unique UIDs for interaction

// Click an element
chrome-devtools_click({ uid: "element-123" })

// Double-click an element
chrome-devtools_click({ uid: "element-123", dblClick: true })

// Hover over element
chrome-devtools_hover({ uid: "element-123" })

// Drag and drop
chrome-devtools_drag({
  from_uid: "source-element",
  to_uid: "target-element"
})

// Type text
chrome-devtools_fill({ uid: "input-456", value: "Hello, World!" })

// Fill multiple form elements at once
chrome-devtools_fill_form({
  elements: [
    { uid: "input-name", value: "John Doe" },
    { uid: "input-email", value: "john@example.com" },
    { uid: "select-country", value: "USA" }
  ]
})

// Press keyboard shortcuts
chrome-devtools_press_key({ key: "Enter" })
chrome-devtools_press_key({ key: "Control+A" })
chrome-devtools_press_key({ key: "Control+Shift+R" })

Screenshots and snapshots

// Take viewport screenshot
chrome-devtools_take_screenshot({ format: "png" })

// Take full page screenshot
chrome-devtools_take_screenshot({ fullPage: true, format: "png" })

// Take screenshot of specific element
chrome-devtools_take_screenshot({
  uid: "element-123",
  format: "jpeg",
  quality: 90
})

// Save screenshot to file
chrome-devtools_take_screenshot({
  filePath: "./screenshots/homepage.png"
})

// Take text snapshot (a11y tree)
const snapshot = chrome-devtools_take_snapshot()
// Use UIDs from snapshot for subsequent interactions

Console debugging

// List all console messages
chrome-devtools_list_console_messages()

// Filter by message types
chrome-devtools_list_console_messages({
  types: ["error", "warn"]
})

// Get specific message by ID
chrome-devtools_get_console_message({ msgid: 1 })

// Execute JavaScript in page context
chrome-devtools_evaluate_script({
  function: "() => { return document.title; }"
})

// Execute with element argument
chrome-devtools_evaluate_script({
  function: "(el) => { return el.innerText; }",
  args: [{ uid: "element-123" }]
})

Network debugging

// List all network requests
chrome-devtools_list_network_requests()

// Filter by resource types
chrome-devtools_list_network_requests({
  resourceTypes: ["xhr", "fetch", "document"]
})

// Get specific request details
chrome-devtools_get_network_request({ reqid: 42 })

// Get currently selected request in DevTools
chrome-devtools_get_network_request()

Performance analysis

// Start performance trace with page reload
chrome-devtools_performance_start_trace({
  reload: true,
  autoStop: true,
  filePath: "./traces/performance.json"
})

// Start trace without reload
chrome-devtools_performance_start_trace({
  reload: false,
  autoStop: false,
  filePath: "./traces/performance.json.gz"
})

// Stop active trace
chrome-devtools_performance_stop_trace({
  filePath: "./traces/performance.json"
})

// Analyze performance insights
chrome-devtools_performance_analyze_insight({
  insightSetId: "lcp-insight-set-123",
  insightName: "LCPBreakdown"
})

Emulation and testing

// Resize viewport
chrome-devtools_resize_page({ width: 375, height: 667 })  // iPhone SE
chrome-devtools_resize_page({ width: 1920, height: 1080 })  // Desktop

// Emulate network conditions
chrome-devtools_emulate({
  networkConditions: "Slow 3G"
})

// Emulate CPU throttling (1-20x slowdown)
chrome-devtools_emulate({
  cpuThrottlingRate: 4
})

// Emulate geolocation
chrome-devtools_emulate({
  geolocation: {
    latitude: 37.7749,
    longitude: -122.4194
  }
})

// Clear emulations
chrome-devtools_emulate({
  networkConditions: "No emulation",
  cpuThrottlingRate: 1,
  geolocation: null
})

Waiting and synchronization

// Wait for text to appear
chrome-devtools_wait_for({
  text: "Welcome",
  timeout: 10000
})

// Navigate with custom timeout
chrome-devtools_navigate_page({
  type: "url",
  url: "https://slow-site.com",
  timeout: 30000
})

File upload

// Upload file through file input
chrome-devtools_upload_file({
  uid: "file-input-123",
  filePath: "/path/to/file.pdf"
})

Dialog handling

// Accept dialog (alert, confirm, prompt)
chrome-devtools_handle_dialog({ action: "accept" })

// Dismiss dialog
chrome-devtools_handle_dialog({ action: "dismiss" })

// Accept with prompt text
chrome-devtools_handle_dialog({
  action: "accept",
  promptText: "User entered text"
})

Best practices

• Always take a snapshot before interacting with elements to get stable UIDs
• Wait for elements to appear before clicking (use wait_for or check snapshot)
• Use explicit timeouts for slow-loading pages
• Save screenshots with descriptive names for documentation
• Capture console errors during test runs for debugging
• Use performance traces to identify bottlenecks
• Test responsive designs by emulating different screen sizes
• Filter network requests to focus on XHR/fetch for API testing
• Handle dialogs promptly after they appear

Common workflows

E2E test flow

1. chrome-devtools_list_pages() - Check available pages
2. chrome-devtools_select_page({ pageId: 0 }) - Select target page
3. chrome-devtools_navigate_page({ type: "url", url: "..." }) - Navigate
4. chrome-devtools_take_snapshot() - Get page structure
5. chrome-devtools_fill({ uid: "...", value: "..." }) - Fill forms
6. chrome-devtools_click({ uid: "..." }) - Submit
7. chrome-devtools_take_screenshot() - Capture result
8. chrome-devtools_list_console_messages() - Check for errors

Performance debugging flow

1. chrome-devtools_navigate_page({ type: "url", url: "..." })
2. chrome-devtools_performance_start_trace({ reload: true, autoStop: true })
3. chrome-devtools_list_network_requests() - Analyze resources
4. chrome-devtools_performance_analyze_insight({ ... }) - Review insights

Network debugging flow

1. chrome-devtools_list_network_requests({ resourceTypes: ["xhr", "fetch"] })
2. chrome-devtools_get_network_request({ reqid: 123 }) - Inspect payload
3. chrome-devtools_list_console_messages({ types: ["error"] }) - Check errors