diegosouzapw 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