147 lines
4.1 KiB
Markdown
147 lines
4.1 KiB
Markdown
---
|
|
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
|