Chrome DevTools Protocol (CDP)
Get tab WebSocket URL first: Never connect to ws://localhost:9222/devtools/browser directly. Fetch http://localhost:9222/json/list and use webSocketDebuggerUrl from the active tab.
Enable domains before use: Runtime.enable and Page.enable must be called before any Runtime.evaluate or Page.navigate commands.
CDP is async: Wait for response before sending next command. Use Promise-based wrapper with response ID tracking.
Screenshot on high-DPI: Include fromSurface: true and scale: 2 in Page.captureScreenshot params for Retina displays.
Get response body separately: Network.responseReceived doesn't include body. Call Network.getResponseBody with requestId after response completes.
Chrome Extension Manifest V3
Permissions split: Use permissions for APIs, host_permissions for URLs. Never use http://*/* in permissions.
Service workers terminate: No persistent state. Use chrome.storage.local instead of global variables. Use chrome.alarms instead of setInterval.
Content script isolation: Can't access page globals. Use chrome.scripting.executeScript with func for page context. Use window.postMessage for content↔page communication.
Storage is async: chrome.storage.local.get() returns Promise, not data. Always await. Handle QUOTA_EXCEEDED errors.
Context Detection
Detect actual Chrome (not Edge/Brave): Check window.chrome && navigator.vendor === "Google Inc." and exclude Opera/Edge.
Extension context types:
chrome.runtime.idexists → content scriptchrome.runtime.getManifestexists → popup/background/optionschrome.loadTimesexists but no runtime → regular Chrome web page
Manifest version check: Wrap chrome.runtime.getManifest() in try-catch. Use chrome.action for V3, chrome.browserAction for V2.
Performance Debugging
Memory API conditional: Check 'memory' in performance before accessing performance.memory.usedJSHeapSize.
Use performance marks: performance.mark() and performance.measure() for sub-frame timing. Clear marks to prevent memory leaks.
Layout thrash detection: PerformanceObserver with entryTypes: ['measure', 'paint', 'largest-contentful-paint']. Flag entries >16.67ms.
Network Debugging
Block before navigate: Call Network.setBlockedURLs before Page.navigate, not after.
Request interception: Use Network.setRequestInterception with requestStage: 'Request' for granular control. Return errorReason: 'BlockedByClient' to block.
Security Contexts
Mixed content: HTTPS pages can't load HTTP resources. Check location.protocol vs resource URL.
CORS errors: TypeError on cross-origin fetch usually means CORS. Check DevTools Network tab for specific error.
Secure context required: File System Access API, Clipboard API require window.isSecureContext === true and user gesture.