Console 메시지 분류
런타임 오류, hydration 경고, source map 위치를 먼저 확인해 재현 지점을 좁힙니다.
DevTools
DevTools 패널별 진단 기준
오류 로그, 요청 실패, 저장소 상태, 렌더링 병목은 서로 다른 패널에서 더 선명하게 보입니다.
Network 응답 추적
API 요청, 상태 코드, 캐시 여부, 로딩 시간을 함께 보며 화면 지연의 원인을 나눕니다.
Application 상태 점검
쿠키, localStorage, service worker, cache storage를 확인해 오래된 클라이언트 상태를 제거합니다.
Performance 타임라인 분석
스크립트 실행, layout, paint 구간을 비교해 긴 작업과 잦은 재계산을 찾습니다.
증상에 맞는 패널부터 열면 추적 시간이 줄어듭니다
API 실패는 Network, 상태 저장 문제는 Application, 느린 렌더링은 Performance에서 시작하는 식으로 나눕니다.
패널별 역할
NetworkAPI 요청, 응답 코드, 캐시 여부, 로딩 시간을 살핍니다.
Application쿠키, localStorage, service worker 상태를 확인합니다.
Performance렌더링, 스크립트 실행, 레이아웃 비용을 타임라인으로
봅니다.