Web Basic · Debugging

디버깅 단서를 입력·상태·네트워크로 좁히기

고급 디버깅은 로그를 많이 찍는 것이 아니라, 잘못된 값이 입력에서 들어왔는지 상태 변경 중 생겼는지 네트워크 응답에서 왔는지 좁히는 과정이다.

01

재현

계정, 입력값, 화면 크기, 브라우저 조건을 고정한다.

02

경계 선택

입력 처리, 상태 변경, 렌더링, 네트워크 중 의심 지점을 고른다.

03

중단점

반복 흐름은 조건부 breakpoint로 필요한 값에서만 멈춘다.

04

원인 역추적

call stack을 거슬러 값이 처음 달라지는 순간을 찾는다.

Line
특정 줄 정지 계산 직전과 직후 값을 비교
기본 조사
Conditional
조건부 정지 특정 id나 길이에서만 멈춤
루프에 적합
XHR
요청 단서 잘못된 payload와 응답 body 확인
서버 문제 분리
DOM
노드 변경 감지 예상 밖 삽입·삭제·속성 변경 추적
서드파티 문제에 유용

재현성 · 관찰값 · 분리 점검

재현성 같은 조건에서 같은 버그가 난다.
관찰값 watch에 원인 후보를 올려 변화만 본다.
분리 클라이언트 상태 문제와 서버 응답 문제를 구분한다.
중단점 정상 통과 수정 뒤 같은 중단점이 정상 값을 통과한다.