•
Why
◦
디버깅 시 증상을 모호하게 두면 루프를 돌면서 가설 - 실험 사이에서 학습이 일어나지 않아 무지성 로그·수정 토끼굴에 빠진다.
◦
점진적 심화(progressive deepening) 이론에 따르면, 인간의 작업 기억 용량 한계 때문에 깊이 탐색을 한번에 길게 하기 보다는 여러 번 왕복 하면서 조금씩 더 깊이 파고드는 방식이 효과적이다.
•
How
1.
실패 화면, 에러 메시지를 단 한 문장으로 요약해 노트에 쓴다.
2.
가설 옆에 원인으로 가능성이 높은 후보 3가지를 적는다.
3.
각 후보 옆에 확인 방법을 추가한다 → ex. 변수 값, 네트워크 응답, DOM 상태
4.
확인 과정에서 복잡한 절차를 거쳐 값이 확인되어야 하는 경우 콘솔이 아니라 디버거를 활용해야 한다고 추가로 표기한다.
5.
“예상했던 결과 vs 실제 결과”를 표로 비교한다.
•
Expectation
◦
상황 인식: “뇌가 무작정 수정을 시도하고 있다” 감지
◦
패턴 매칭: “먼저 에러 원인에 대한 가설을 세팅하라” 떠올림
◦
자동 대응: 노트 펴고 한 줄 요약부터 적는다.
•
Caution
◦
디버거 사용이 익숙하지 않다면 사용법을 익혀야 함.
Chrome for Developers자바스크립트 디버그 | Chrome DevTools | Chrome for Developers
•
디버깅 도구 선택
◦
단순한 결과물: console.log
◦
로직의 과정을 봐야 하면: debugger break point
◦
네트워크 요청 봐야 하면: 네트워크 탭

