증상별 첫 패널 선택

DevTools는 모든 탭을 여는 도구가 아니라 첫 증거를 고르는 지도다

Next.js 문제를 볼 때는 증상에 맞는 첫 패널을 정하면 조사 시간이 줄어든다. 오류 문구, 요청 실패, UI 깨짐, 느린 상호작용은 서로 다른 증거에서 시작한다.

1 빨간 오류가 보인다

런타임 예외, hydration mismatch, 경고 스택은 콘솔에서 시작한다.

2 데이터가 안 온다

API Route, Server Action, 이미지와 JS 요청은 네트워크 기록을 본다.

3 레이아웃이 깨진다

실제 DOM, class, 계산된 CSS는 요소 패널에서 대조한다.

4 상호작용이 느리다

긴 작업, layout shift, 렌더 지연은 성능 기록으로 좁힌다.

5 로그 위치가 다르다

서버 컴포넌트 로그는 브라우저가 아니라 터미널과 배포 로그에서 본다.

콘솔

컴포넌트 스택

오류 메시지, 경고, source 위치
네트워크

요청과 응답

status, header, waterfall, payload
요소

렌더 결과

DOM, computed style, box model
성능

느린 구간

long task, paint, layout cost