15. Chrome DevTools#

1. Network Tab — Most Exam-Relevant#

What Network Tab Shows:#

• ALL HTTP requests made by the page
• Request/response headers
• API call details
• Load times and waterfall
• Status codes
• Request payload (body)
• Response data

Exam Scenarios — Network Tab:#

Network Tab — Key Features:#

Request list → all HTTP calls
Filter by type → XHR/Fetch for API calls specifically

Click any request to see:
├── Headers tab
│   ├── Request URL
│   ├── Request Method (GET, POST)
│   ├── Status Code (200, 401, 429)
│   ├── Authorization header (where API key is)
│   └── Content-Type
│
├── Payload tab → request body (POST data)
│
├── Response tab → actual JSON response data
│
└── Timing tab → request timing breakdown
    ├── DNS lookup
    ├── Connection time
    ├── Time to First Byte (TTFB)
    └── Content download time

Throttling → simulate slow network
  (Fast 3G, Slow 3G, Custom)

Debugging with Network Tab:#

Problem: API returns 401
→ Network tab → click request → Headers tab
→ Check: is Authorization header present?
→ Check: API key format correct?

Problem: Rate limiting (429)
→ Network tab → filter XHR
→ Look for pattern of 429 responses
→ Timing tab → see request frequency
→ Fix: add time.sleep() between requests

Problem: Wrong data in response
→ Network tab → click request → Response tab
→ See exact JSON returned
→ Compare with expected structure

• ✅ Network tab for API debugging — exam answer (JAN_FN Q284)
• ✅ Network tab for load time analysis — exam answer (JAN_FN Q287)
• ✅ Network tab with timing analysis for rate limiting — exam answer (May_FN Q363)
• ❌ Console tab → JavaScript errors, not API headers
• ❌ Application tab → storage inspection, not API calls
• ❌ Performance tab → CPU/rendering bottlenecks, not API

2. Memory Tab — JavaScript Memory Leaks#

What Memory Tab Does:#

• Detects JavaScript memory leaks
• Heap snapshots → shows all objects in memory
• Allocation timeline → tracks allocations over time
• Compare snapshots → find growing object counts

Memory Leak Detection Workflow:#

1. Open DevTools → Memory tab
2. Take baseline heap snapshot
3. Reproduce the action (navigate pages, click buttons)
4. Take another heap snapshot
5. Select "Comparison" view
6. Look for:
   → Objects with positive "# New" count
   → Large "Size Delta" values

Common Causes of Memory Leaks:#

→ Event listeners not removed
→ Timers not cleared (setInterval without clearInterval)
→ DOM nodes detached but still referenced
→ Global variables holding large data
→ Closures holding references unnecessarily

• ✅ Memory tab for JavaScript memory leak debugging — exam answer (JAN_AN Q403)
• ❌ Network tab → HTTP requests, not memory
• ❌ Application tab → storage, not memory
• ❌ Console tab → JS errors, not memory profiling

3. Console Tab:#

• JavaScript error messages
• console.log() output
• Run JavaScript commands interactively
• Error filtering by level (errors, warnings, info)
• ❌ NOT for API header inspection
• ❌ NOT for memory leak detection

4. Elements Tab:#

• Inspect and edit HTML and CSS in real-time
• View DOM structure
• Debug layout issues
• Computed styles, box model visualization
• ❌ NOT for network requests
• ❌ NOT for memory profiling

5. Sources Tab:#

• View JavaScript files
• Set breakpoints in code
• Step through code execution
• Watch variables
• ❌ NOT for HTTP requests
• ❌ NOT for memory

6. Performance Tab:#

• CPU usage profiling
• Rendering performance
• Frame rate analysis
• JavaScript execution timeline
• ❌ NOT for API debugging
• ❌ NOT for memory leak detection

7. Application Tab:#

• Local storage / Session storage
• Cookies
• IndexedDB
• Service workers
• Cache storage
• ❌ NOT for network requests
• ❌ NOT for memory profiling

8. Lighthouse Tab:#

• Automated audits:
  • Performance score
  • Accessibility
  • SEO
  • Best practices
• Provides actionable recommendations
• ❌ NOT for real-time debugging

9. Security Tab:#

• HTTPS certificate details
• Mixed content issues
• Security overview

All DevTools Tabs — Complete Reference:#

DevTools — Exam Answer Mapping:#

"API request headers and responses"
→ Network tab ✅

"Webpage load time and resources"
→ Network tab ✅

"Rate limiting pattern (429)"
→ Network tab → timing analysis ✅

"JavaScript memory leak"
→ Memory tab ✅

"JavaScript errors"
→ Console tab

"Inspect/edit HTML and CSS"
→ Elements tab

"Set JavaScript breakpoints"
→ Sources tab

"CPU and rendering performance"
→ Performance tab

"Cookies and local storage"
→ Application tab

Quick Reference#

Network tab:
  ✅ API request headers + responses
  ✅ Webpage load time
  ✅ Rate limiting pattern (429)
  ✅ Request timing analysis
  ✅ Request payload (POST body)
  ✅ Response data (JSON)

Memory tab:
  ✅ JavaScript memory leak detection
  ✅ Heap snapshots
  ✅ Allocation timeline

Console tab:
  → JS errors + console.log

Elements tab:
  → HTML/CSS inspection

Sources tab:
  → Breakpoints + step-through

Performance tab:
  → CPU profiling

Application tab:
  → Storage + cookies

Lighthouse tab:
  → Automated audit scores