2nd/10_Wiki/Topics/Frontend/Debugging Frontend Applications.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-debugging-frontend-applications	Debugging Frontend Applications	10_Wiki/Topics	verified	self	Frontend Debugging DevTools Workflow	none	A	0.9	applied	debugging devtools performance chrome		2026-05-10	pending	language framework JavaScript/TypeScript Browser DevTools

Debugging Frontend Applications

매 한 줄

"매 frontend 디버깅 = DevTools 의 mastery + reproducible state.". Chrome DevTools (2024-2026)는 매 Performance Insights, AI assistance (Gemini Nano), Recorder, Memory profiler 의 통합. 매 핵심은 매 issue 의 reproduction → instrument → bisect → fix.

매 핵심

매 DevTools panels

• Sources: breakpoint, conditional bp, log point, blackbox.
• Performance: flame chart, INP / LCP markers, Performance Insights.
• Network: throttle, replay XHR, request blocking.
• Memory: heap snapshot, allocation timeline.
• Application: storage, service worker, cache.
• Lighthouse / Recorder: automated audit + user flow capture.

매 reproduction

• 매 hard bug = race / state / network / timing.
• 매 deterministic repro = first 50% of debug.

매 응용

1. Memory leak hunt — heap snapshot diff.
2. Slow render trace — Performance flame.
3. Network race — Replay & throttle.
4. Production-only bug — source-mapped stack + Sentry replay.

💻 패턴

1. Conditional breakpoint / log point

// Sources panel: right-click line number
// Conditional: user.id === 42
// Log point: console.log('user', user) — 매 코드 수정 X

2. debugger keyword + dynamic

function process(items) {
  if (items.length > 1000) debugger; // pause when large
  // ...
}

3. console.* advanced

console.table(users);
console.group('render');
  console.time('paint'); // ...
  console.timeEnd('paint');
console.groupEnd();
console.dir(node); // DOM as JS object
console.trace();
console.count('clicked');

4. Performance.measure (User Timing)

performance.mark('fetch-start');
await fetch('/api/x');
performance.mark('fetch-end');
performance.measure('fetch', 'fetch-start', 'fetch-end');
// shows in DevTools Performance + reportable to RUM

5. Long Task observer

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) console.warn('long task', entry);
  }
}).observe({ type: 'longtask', buffered: true });

6. Heap snapshot leak hunt

1. DevTools → Memory → "Heap snapshot" (baseline).
2. Trigger interaction (open/close modal 5x).
3. Take 2nd snapshot.
4. Compare: filter by "Objects allocated between snapshots".
5. Look for retained DOM nodes / event listeners.

7. Network throttle & replay

- Network panel → "No throttling" → "Slow 4G" / Custom (300ms RTT).
- Right-click request → "Replay XHR" / "Block request URL".
- Override response: Sources → Overrides → Network → Save.

8. Source map verification

# Verify upload
curl -I https://cdn.example.com/main.js.map
# In DevTools, check status: open Sources, file should show formatted code
# If "missing source map", check //# sourceMappingURL comment + CORS

9. React DevTools Profiler

- Components tab — inspect props, hooks, set Suspense state.
- Profiler tab — record interaction, view "Why did this render?" (commit reason).
- Highlight updates when components render: settings cog → "Highlight updates".

10. Chrome AI assistance (2024-)

- DevTools Console → "Ask AI" (Gemini Nano integration).
- "Why is this CSS not applying?" — pastes computed styles into prompt.
- Performance Insights — auto-flagged INP / CLS culprits.

매 결정 기준

상황	Approach
Slow render	Performance panel + React Profiler.
Memory leak	Heap snapshot diff.
Race condition	Network throttle + console.trace.
Prod-only	Source map + Sentry Replay.
CSS quirk	DevTools Computed + AI assistance.
Long task	PerformanceObserver longtask.

기본값: Repro locally → Performance flame → narrow → fix → regression test.

🔗 Graph

• 부모: Web Performance · Browser DevTools
• 변형: Node Debugging · Mobile Web Debugging
• 응용: React DevTools · Vue DevTools · Sentry Replay
• Adjacent: Source Maps · Lighthouse

🤖 LLM 활용

언제: 매 stack trace 의 explain, 매 console.error 의 plausible cause 의 list. 언제 X: 매 timing-dependent / state-dependent bug — 매 actual repro 필수.

❌ 안티패턴

• console.log ship to prod: 매 left-over noise.
• alert() debugging: 매 modal blocks event loop.
• Disable source maps: 매 prod debug 의 X.
• Profile in prod build only: 매 dev mode warnings 의 miss.

🧪 검증 / 중복

• Verified (Chrome DevTools docs 2024-2026, web.dev).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — DevTools 2026 + AI assistance + Profiler