Web Basic · Debugging

브레이크포인트 기반 디버깅 루프

고급 디버깅은 로그를 더 많이 찍는 기술이 아니라, 실행을 멈출 위치와 관찰할 상태를 좁혀 원인을 빠르게 격리하는 방식이다.

01

재현 고정

버그가 나는 입력, 화면 크기, 계정 상태를 먼저 기록한다.

02

의심 경계

입력 수신, 상태 변경, 렌더링, 네트워크 중 가장 가까운 경계를 고른다.

03

조건 중단

반복 호출이 많으면 특정 값일 때만 멈추도록 조건을 건다.

04

원인 축소

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

Line
특정 줄에서 정지 계산 직전·직후 값을 비교
가장 기본이지만 반복 흐름에는 소음이 큼
Conditional
조건 만족 시 정지 id, length, flag 같은 이상값에 맞춰 멈춤
대량 루프 조사에 적합
XHR
요청 발생 시 정지 잘못된 payload 또는 응답 처리 시작점을 찾음
네트워크 패널과 함께 본다
DOM
노드 변경 감지 예상치 못한 삽입·삭제·속성 변경을 추적
서드파티 스크립트 문제에 유용

재현성 · 관찰값 · 요청 확인 점검

재현성 같은 입력으로 같은 위치에서 멈춘다.
관찰값 watch에 원인 후보 변수를 올려 변화만 추적한다.
요청 확인 상태 버그와 서버 응답 버그를 분리한다.
수정 검증 고친 뒤 같은 중단점이 정상 값을 통과한다.