Initial commit: antigravity-claudekit
This commit is contained in:
nvtien
146
skills/ck-chrome-devtools/SKILL.md
Normal file
146
skills/ck-chrome-devtools/SKILL.md
Normal file
@@ -0,0 +1,146 @@
|
||||
---
|
||||
name: ck-chrome-devtools
|
||||
description: >
|
||||
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
|
||||
|
||||
```javascript
|
||||
// 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:
|
||||
```javascript
|
||||
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:**
|
||||
```bash
|
||||
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
|
||||
Reference in New Issue
Block a user