debug clue map

개발자 도구의 단서는 패널에서 코드 위치로 이어져야 한다

Console만 보거나 Network만 보는 식으로 멈추지 말고, 증상, 패널, 파일 위치, 다음 행동을 한 번에 묶어 추적한다.

Console런타임 오류와 hydration 경고
NetworkAPI 응답, 상태 코드, 캐시 헤더
ElementsDOM, CSS 적용, 레이아웃 흔들림
Application쿠키, 스토리지, service worker
observe

증상을 문장으로 고정

느림, 깨짐, 누락, 인증 실패 중 무엇인지 먼저 분리한다.

inspect

맞는 패널 선택

오류는 Console, 요청은 Network, 스타일은 Elements부터 본다.

locate

코드 경계 찾기

client component, server action, API route, middleware를 나눈다.

confirm

수정 후 재현

같은 입력과 같은 네트워크 조건에서 다시 확인한다.

증상첫 패널확인할 코드 위치다음 행동
클릭해도 반응 없음Console클라이언트 컴포넌트 이벤트 핸들러에러 스택과 상태 값을 추적
데이터가 비어 있음NetworkAPI Route, Server Action, fetch 호출상태 코드와 응답 본문 비교
스타일이 깨짐ElementsCSS Module, Tailwind class, layout wrapper계산된 스타일과 박스 크기 확인
로그인 유지 실패Application쿠키 옵션, session storage, middleware도메인, secure, sameSite 점검
boundary

브라우저와 서버를 나눈다

브라우저 콘솔에는 서버 컴포넌트 로그가 보이지 않는다.

evidence

단서를 캡처한다

오류 메시지, 요청 ID, 응답 본문, 적용 CSS를 남긴다.

repeat

재현 조건을 고정한다

캐시, 로그인 상태, 네트워크 속도를 바꾸지 않고 비교한다.