antigravity-claudekit/skills/ck-chrome-devtools/SKILL.md

name, description

name	description
ck-chrome-devtools	Guides browser debugging using Chrome DevTools protocols and techniques. Activate when user says 'debug in browser', 'Chrome DevTools', 'inspect network requests', 'profile performance', 'debug JavaScript in browser', or 'use DevTools to find issue'. Accepts error descriptions, performance problems, and network/console issues.

Overview

Provides systematic Chrome DevTools debugging workflows for JavaScript errors, network issues, performance bottlenecks, and CSS/layout problems in web applications.

When to Use

• Diagnosing JavaScript runtime errors in the browser
• Inspecting and debugging network requests/responses
• Profiling page performance and identifying bottlenecks
• Debugging CSS layout and painting issues
• Analyzing memory leaks and heap usage
• Remote debugging Node.js or mobile browsers

Don't Use When

• Issue is in server-side code only (use server logs / ck-debug)
• Automated browser testing is needed (use ck-agent-browser)
• Debugging build/compile errors (those are in terminal, not DevTools)

Steps / Instructions

1. Open DevTools

• Windows/Linux: F12 or Ctrl+Shift+I
• macOS: Cmd+Option+I
• Right-click element → Inspect

2. Console Panel — JavaScript Errors

// Useful console commands during debugging:

// Log with context
console.log('%cDebug', 'color: orange; font-weight: bold', { variable });

// Group related logs
console.group('API Call');
console.log('Request:', url);
console.log('Response:', data);
console.groupEnd();

// Track execution time
console.time('operation');
doSomething();
console.timeEnd('operation');

// Stack trace
console.trace('How did I get here?');

Set breakpoints from console:

debugger; // pause execution when DevTools is open

3. Sources Panel — Breakpoints & Stepping

• Click line number to set breakpoint
• Right-click breakpoint → Conditional breakpoint for count > 5 style conditions
• Use Call Stack panel to trace execution path
• Scope panel shows local/closure/global variables
• Step controls: F8 resume, F10 step over, F11 step into, Shift+F11 step out

Logpoints (non-breaking console.log via DevTools):

• Right-click line → Add logpoint → 'Value of x:', x

4. Network Panel — Request Debugging

Filter options:

XHR / Fetch  — API calls only
WS           — WebSocket frames
Doc          — HTML document requests

Key columns to enable:

• Initiator — what triggered the request
• Timing — TTFB, download time breakdown
• Response — inspect payload

Copy as cURL:

• Right-click request → Copy → Copy as cURL
• Replay in terminal with curl ...

Simulate slow network:

• Throttling dropdown → Slow 3G / Custom

5. Performance Panel — Profiling

Record a performance trace:

1. Open Performance tab
2. Click record (circle icon)
3. Perform the slow interaction
4. Stop recording
5. Analyze flame chart

Key areas:

• Long Tasks (red corners, >50ms) — block main thread
• Layout / Paint — expensive style recalculation
• Scripting — JavaScript execution time

6. Memory Panel — Leak Detection

Heap Snapshot:
1. Take snapshot before action
2. Perform action (e.g., navigate away and back)
3. Take snapshot after
4. Compare snapshots — look for retained objects

Allocation timeline:

• Records JS heap allocations over time
• Identify objects that grow without being GC'd

7. Application Panel

• Storage: inspect localStorage, sessionStorage, cookies, IndexedDB
• Service Workers: view registered workers, force update, simulate offline
• Cache Storage: inspect cached assets

8. Remote Debugging

Node.js:

node --inspect server.js
# Open: chrome://inspect

Mobile (Android):

1. Enable USB debugging on device
2. chrome://inspect#devices
3. Select device → Inspect

Notes

• Use $0 in console to reference the currently selected DOM element
• copy(object) copies any JS value to clipboard from console
• Enable "Preserve log" to keep console output across page navigations
• Source maps must be configured for debugging minified production code