zhongwei/gh-rafaelcalleja-claude-market-place-plugins-claudekit-skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6ec3196ecc6d26379deda4224c1e5dfd571e0525
gh-rafaelcalleja-claude-mar…/skills/chrome-devtools/references/cdp-domains.md
Zhongwei Li 6ec3196ecc Initial commit
2025-11-30 08:48:52 +08:00

17 KiB
Raw Blame History

Chrome DevTools Protocol (CDP) Domains Reference

Complete reference of CDP domains and their capabilities for browser automation and debugging.

Overview

CDP is organized into 47 domains, each providing specific browser capabilities. Domains are grouped by functionality:

  • Core - Fundamental browser control
  • DOM & Styling - Page structure and styling
  • Network & Fetch - HTTP traffic management
  • Page & Navigation - Page lifecycle control
  • Storage & Data - Browser storage APIs
  • Performance & Profiling - Metrics and analysis
  • Emulation & Simulation - Device and network emulation
  • Worker & Service - Background tasks
  • Developer Tools - Debugging support

Core Domains

Runtime

Purpose: Execute JavaScript, manage objects, handle promises

Key Commands:

  • Runtime.evaluate(expression) - Execute JavaScript
  • Runtime.callFunctionOn(functionDeclaration, objectId) - Call function on object
  • Runtime.getProperties(objectId) - Get object properties
  • Runtime.awaitPromise(promiseObjectId) - Wait for promise resolution

Key Events:

  • Runtime.consoleAPICalled - Console message logged
  • Runtime.exceptionThrown - Uncaught exception

Use Cases:

  • Execute custom JavaScript
  • Access page data
  • Monitor console output
  • Handle exceptions

Debugger

Purpose: JavaScript debugging, breakpoints, stack traces

Key Commands:

  • Debugger.enable() - Enable debugger
  • Debugger.setBreakpoint(location) - Set breakpoint
  • Debugger.pause() - Pause execution
  • Debugger.resume() - Resume execution
  • Debugger.stepOver/stepInto/stepOut() - Step through code

Key Events:

  • Debugger.paused - Execution paused
  • Debugger.resumed - Execution resumed
  • Debugger.scriptParsed - Script loaded

Use Cases:

  • Debug JavaScript errors
  • Inspect call stacks
  • Set conditional breakpoints
  • Source map support

Console (Deprecated - Use Runtime/Log)

Purpose: Legacy console message access

Note: Use Runtime.consoleAPICalled event instead for new implementations.

DOM & Styling Domains

DOM

Purpose: Access and manipulate DOM tree

Key Commands:

  • DOM.getDocument() - Get root document node
  • DOM.querySelector(nodeId, selector) - Query selector
  • DOM.querySelectorAll(nodeId, selector) - Query all
  • DOM.getAttributes(nodeId) - Get element attributes
  • DOM.setOuterHTML(nodeId, outerHTML) - Replace element
  • DOM.getBoxModel(nodeId) - Get element layout box
  • DOM.focus(nodeId) - Focus element

Key Events:

  • DOM.documentUpdated - Document changed
  • DOM.setChildNodes - Child nodes updated

Use Cases:

  • Navigate DOM tree
  • Query elements
  • Modify DOM structure
  • Get element positions

CSS

Purpose: Inspect and modify CSS styles

Key Commands:

  • CSS.enable() - Enable CSS domain
  • CSS.getComputedStyleForNode(nodeId) - Get computed styles
  • CSS.getInlineStylesForNode(nodeId) - Get inline styles
  • CSS.getMatchedStylesForNode(nodeId) - Get matched CSS rules
  • CSS.setStyleTexts(edits) - Modify styles

Key Events:

  • CSS.styleSheetAdded - Stylesheet added
  • CSS.styleSheetChanged - Stylesheet modified

Use Cases:

  • Inspect element styles
  • Debug CSS issues
  • Modify styles dynamically
  • Extract stylesheet data

Accessibility

Purpose: Access accessibility tree

Key Commands:

  • Accessibility.enable() - Enable accessibility
  • Accessibility.getFullAXTree() - Get complete AX tree
  • Accessibility.getPartialAXTree(nodeId) - Get node subtree
  • Accessibility.queryAXTree(nodeId, role, name) - Query AX tree

Use Cases:

  • Accessibility testing
  • Screen reader simulation
  • ARIA attribute inspection
  • AX tree analysis

Network & Fetch Domains

Network

Purpose: Monitor and control HTTP traffic

Key Commands:

  • Network.enable() - Enable network tracking
  • Network.setCacheDisabled(cacheDisabled) - Disable cache
  • Network.setExtraHTTPHeaders(headers) - Add custom headers
  • Network.getCookies(urls) - Get cookies
  • Network.setCookie(name, value, domain) - Set cookie
  • Network.getResponseBody(requestId) - Get response body
  • Network.emulateNetworkConditions(offline, latency, downloadThroughput, uploadThroughput) - Throttle network

Key Events:

  • Network.requestWillBeSent - Request starting
  • Network.responseReceived - Response received
  • Network.loadingFinished - Request completed
  • Network.loadingFailed - Request failed

Use Cases:

  • Monitor API calls
  • Intercept requests
  • Analyze response data
  • Simulate slow networks
  • Manage cookies

Fetch

Purpose: Intercept and modify network requests

Key Commands:

  • Fetch.enable(patterns) - Enable request interception
  • Fetch.continueRequest(requestId, url, method, headers) - Continue/modify request
  • Fetch.fulfillRequest(requestId, responseCode, headers, body) - Mock response
  • Fetch.failRequest(requestId, errorReason) - Fail request

Key Events:

  • Fetch.requestPaused - Request intercepted

Use Cases:

  • Mock API responses
  • Block requests
  • Modify request/response
  • Test error scenarios

Page & Navigation Domains

Page

Purpose: Control page lifecycle and navigation

Key Commands:

  • Page.enable() - Enable page domain
  • Page.navigate(url) - Navigate to URL
  • Page.reload(ignoreCache) - Reload page
  • Page.goBack()/goForward() - Navigate history
  • Page.captureScreenshot(format, quality) - Take screenshot
  • Page.printToPDF(landscape, displayHeaderFooter) - Generate PDF
  • Page.getLayoutMetrics() - Get page dimensions
  • Page.createIsolatedWorld(frameId) - Create isolated context
  • Page.handleJavaScriptDialog(accept, promptText) - Handle alerts/confirms

Key Events:

  • Page.loadEventFired - Page loaded
  • Page.domContentEventFired - DOM ready
  • Page.frameNavigated - Frame navigated
  • Page.javascriptDialogOpening - Alert/confirm shown

Use Cases:

  • Navigate pages
  • Capture screenshots
  • Generate PDFs
  • Handle popups
  • Monitor page lifecycle

Target

Purpose: Manage browser targets (tabs, workers, frames)

Key Commands:

  • Target.getTargets() - List all targets
  • Target.createTarget(url) - Open new tab
  • Target.closeTarget(targetId) - Close tab
  • Target.attachToTarget(targetId) - Attach debugger
  • Target.detachFromTarget(sessionId) - Detach debugger
  • Target.setDiscoverTargets(discover) - Auto-discover targets

Key Events:

  • Target.targetCreated - New target created
  • Target.targetDestroyed - Target closed
  • Target.targetInfoChanged - Target updated

Use Cases:

  • Multi-tab automation
  • Service worker debugging
  • Frame inspection
  • Extension debugging

Input

Purpose: Simulate user input

Key Commands:

  • Input.dispatchKeyEvent(type, key, code) - Keyboard input
  • Input.dispatchMouseEvent(type, x, y, button) - Mouse input
  • Input.dispatchTouchEvent(type, touchPoints) - Touch input
  • Input.synthesizePinchGesture(x, y, scaleFactor) - Pinch gesture
  • Input.synthesizeScrollGesture(x, y, xDistance, yDistance) - Scroll

Use Cases:

  • Simulate clicks
  • Type text
  • Drag and drop
  • Touch gestures
  • Scroll pages

Storage & Data Domains

Storage

Purpose: Manage browser storage

Key Commands:

  • Storage.getCookies(browserContextId) - Get cookies
  • Storage.setCookies(cookies) - Set cookies
  • Storage.clearCookies(browserContextId) - Clear cookies
  • Storage.clearDataForOrigin(origin, storageTypes) - Clear storage
  • Storage.getUsageAndQuota(origin) - Get storage usage

Storage Types:

  • appcache, cookies, file_systems, indexeddb, local_storage, shader_cache, websql, service_workers, cache_storage

Use Cases:

  • Cookie management
  • Clear browser data
  • Inspect storage usage
  • Test quota limits

DOMStorage

Purpose: Access localStorage/sessionStorage

Key Commands:

  • DOMStorage.enable() - Enable storage tracking
  • DOMStorage.getDOMStorageItems(storageId) - Get items
  • DOMStorage.setDOMStorageItem(storageId, key, value) - Set item
  • DOMStorage.removeDOMStorageItem(storageId, key) - Remove item

Key Events:

  • DOMStorage.domStorageItemsCleared - Storage cleared
  • DOMStorage.domStorageItemAdded/Updated/Removed - Item changed

IndexedDB

Purpose: Query IndexedDB databases

Key Commands:

  • IndexedDB.requestDatabaseNames(securityOrigin) - List databases
  • IndexedDB.requestDatabase(securityOrigin, databaseName) - Get DB structure
  • IndexedDB.requestData(securityOrigin, databaseName, objectStoreName) - Query data

Use Cases:

  • Inspect IndexedDB data
  • Debug database issues
  • Extract stored data

CacheStorage

Purpose: Manage Cache API

Key Commands:

  • CacheStorage.requestCacheNames(securityOrigin) - List caches
  • CacheStorage.requestCachedResponses(cacheId, securityOrigin) - List cached responses
  • CacheStorage.deleteCache(cacheId) - Delete cache

Use Cases:

  • Service worker cache inspection
  • Offline functionality testing

Performance & Profiling Domains

Performance

Purpose: Collect performance metrics

Key Commands:

  • Performance.enable() - Enable performance tracking
  • Performance.disable() - Disable tracking
  • Performance.getMetrics() - Get current metrics

Metrics:

  • Timestamp, Documents, Frames, JSEventListeners, Nodes, LayoutCount, RecalcStyleCount, LayoutDuration, RecalcStyleDuration, ScriptDuration, TaskDuration, JSHeapUsedSize, JSHeapTotalSize

Use Cases:

  • Monitor page metrics
  • Track memory usage
  • Measure render times

PerformanceTimeline

Purpose: Access Performance Timeline API

Key Commands:

  • PerformanceTimeline.enable(eventTypes) - Subscribe to events

Event Types:

  • mark, measure, navigation, resource, longtask, paint, layout-shift

Key Events:

  • PerformanceTimeline.timelineEventAdded - New performance entry

Tracing

Purpose: Record Chrome trace

Key Commands:

  • Tracing.start(categories, options) - Start recording
  • Tracing.end() - Stop recording
  • Tracing.requestMemoryDump() - Capture memory snapshot

Trace Categories:

  • blink, cc, devtools, gpu, loading, navigation, rendering, v8, disabled-by-default-*

Key Events:

  • Tracing.dataCollected - Trace chunk received
  • Tracing.tracingComplete - Recording finished

Use Cases:

  • Deep performance analysis
  • Frame rendering profiling
  • CPU flame graphs
  • Memory profiling

Profiler

Purpose: CPU profiling

Key Commands:

  • Profiler.enable() - Enable profiler
  • Profiler.start() - Start CPU profiling
  • Profiler.stop() - Stop and get profile

Use Cases:

  • Find CPU bottlenecks
  • Optimize JavaScript
  • Generate flame graphs

HeapProfiler (via Memory domain)

Purpose: Memory profiling

Key Commands:

  • Memory.getDOMCounters() - Get DOM object counts
  • Memory.prepareForLeakDetection() - Prepare leak detection
  • Memory.forciblyPurgeJavaScriptMemory() - Force GC
  • Memory.setPressureNotificationsSuppressed(suppressed) - Control memory warnings
  • Memory.simulatePressureNotification(level) - Simulate memory pressure

Use Cases:

  • Detect memory leaks
  • Analyze heap snapshots
  • Monitor object counts

Emulation & Simulation Domains

Emulation

Purpose: Emulate device conditions

Key Commands:

  • Emulation.setDeviceMetricsOverride(width, height, deviceScaleFactor, mobile) - Emulate device
  • Emulation.setGeolocationOverride(latitude, longitude, accuracy) - Fake location
  • Emulation.setEmulatedMedia(media, features) - Emulate media type
  • Emulation.setTimezoneOverride(timezoneId) - Override timezone
  • Emulation.setLocaleOverride(locale) - Override language
  • Emulation.setUserAgentOverride(userAgent) - Change user agent

Use Cases:

  • Mobile device testing
  • Geolocation testing
  • Print media emulation
  • Timezone/locale testing

DeviceOrientation

Purpose: Simulate device orientation

Key Commands:

  • DeviceOrientation.setDeviceOrientationOverride(alpha, beta, gamma) - Set orientation

Use Cases:

  • Test accelerometer features
  • Orientation-dependent layouts

Worker & Service Domains

ServiceWorker

Purpose: Manage service workers

Key Commands:

  • ServiceWorker.enable() - Enable tracking
  • ServiceWorker.unregister(scopeURL) - Unregister worker
  • ServiceWorker.startWorker(scopeURL) - Start worker
  • ServiceWorker.stopWorker(versionId) - Stop worker
  • ServiceWorker.inspectWorker(versionId) - Debug worker

Key Events:

  • ServiceWorker.workerRegistrationUpdated - Registration changed
  • ServiceWorker.workerVersionUpdated - Version updated

WebAuthn

Purpose: Simulate WebAuthn/FIDO2

Key Commands:

  • WebAuthn.enable() - Enable virtual authenticators
  • WebAuthn.addVirtualAuthenticator(options) - Add virtual device
  • WebAuthn.removeVirtualAuthenticator(authenticatorId) - Remove device
  • WebAuthn.addCredential(authenticatorId, credential) - Add credential

Use Cases:

  • Test WebAuthn flows
  • Simulate biometric auth
  • Test security keys

Developer Tools Support

Inspector

Purpose: Protocol-level debugging

Key Events:

  • Inspector.detached - Debugger disconnected
  • Inspector.targetCrashed - Target crashed

Log

Purpose: Collect browser logs

Key Commands:

  • Log.enable() - Enable log collection
  • Log.clear() - Clear logs

Key Events:

  • Log.entryAdded - New log entry

Use Cases:

  • Collect console logs
  • Monitor violations
  • Track deprecations

DOMDebugger

Purpose: DOM-level debugging

Key Commands:

  • DOMDebugger.setDOMBreakpoint(nodeId, type) - Break on DOM changes
  • DOMDebugger.setEventListenerBreakpoint(eventName) - Break on event
  • DOMDebugger.setXHRBreakpoint(url) - Break on XHR

Breakpoint Types:

  • subtree-modified, attribute-modified, node-removed

DOMSnapshot

Purpose: Capture complete DOM snapshot

Key Commands:

  • DOMSnapshot.captureSnapshot(computedStyles) - Capture full DOM

Use Cases:

  • Export page structure
  • Offline analysis
  • DOM diffing

Audits (Lighthouse Integration)

Purpose: Run automated audits

Key Commands:

  • Audits.enable() - Enable audits
  • Audits.getEncodingIssues() - Check encoding issues

LayerTree

Purpose: Inspect rendering layers

Key Commands:

  • LayerTree.enable() - Enable layer tracking
  • LayerTree.compositingReasons(layerId) - Get why layer created

Key Events:

  • LayerTree.layerTreeDidChange - Layers changed

Use Cases:

  • Debug rendering performance
  • Identify layer creation
  • Optimize compositing

Other Domains

Browser

Purpose: Browser-level control

Key Commands:

  • Browser.getVersion() - Get browser info
  • Browser.getBrowserCommandLine() - Get launch args
  • Browser.setPermission(permission, setting, origin) - Set permissions
  • Browser.grantPermissions(permissions, origin) - Grant permissions

Permissions:

  • geolocation, midi, notifications, push, camera, microphone, background-sync, sensors, accessibility-events, clipboard-read, clipboard-write, payment-handler

IO

Purpose: File I/O operations

Key Commands:

  • IO.read(handle, offset, size) - Read stream
  • IO.close(handle) - Close stream

Use Cases:

  • Read large response bodies
  • Process binary data

Media

Purpose: Inspect media players

Key Commands:

  • Media.enable() - Track media players

Key Events:

  • Media.playerPropertiesChanged - Player state changed
  • Media.playerEventsAdded - Player events

BackgroundService

Purpose: Track background services

Key Commands:

  • BackgroundService.startObserving(service) - Track service

Services:

  • backgroundFetch, backgroundSync, pushMessaging, notifications, paymentHandler, periodicBackgroundSync

Domain Dependencies

Some domains depend on others and must be enabled in order:

Runtime (no dependencies)
  ↓
DOM (depends on Runtime)
  ↓
CSS (depends on DOM)

Network (no dependencies)

Page (depends on Runtime)
  ↓
Target (depends on Page)

Debugger (depends on Runtime)

Quick Command Reference

Most Common Commands

// Navigation
Page.navigate(url)
Page.reload()

// JavaScript Execution
Runtime.evaluate(expression)

// DOM Access
DOM.getDocument()
DOM.querySelector(nodeId, selector)

// Screenshots
Page.captureScreenshot(format, quality)

// Network Monitoring
Network.enable()
// Listen for Network.requestWillBeSent events

// Console Messages
// Listen for Runtime.consoleAPICalled events

// Cookies
Network.getCookies(urls)
Network.setCookie(...)

// Device Emulation
Emulation.setDeviceMetricsOverride(width, height, ...)

// Performance
Performance.getMetrics()
Tracing.start(categories)
Tracing.end()

Best Practices

  1. Enable domains before use: Always call .enable() for stateful domains
  2. Handle events: Subscribe to events for real-time updates
  3. Clean up: Disable domains when done to reduce overhead
  4. Use sessions: Attach to specific targets for isolated debugging
  5. Handle errors: Implement proper error handling for command failures
  6. Version awareness: Check browser version for experimental API support

Additional Resources

Reference in New Issue View Git Blame Copy Permalink