Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.0 KiB

Raw Blame History

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

title

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.

매 응용

Memory leak hunt — heap snapshot diff.
Slow render trace — Performance flame.
Network race — Replay & throttle.
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
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

5.0 KiB Raw Blame History