브레이크포인트(breakpoint)는 디버깅할 때 코드의 흐름이나 상태를 관찰하고 싶은 지점에 두는 게 좋다.
※ 필요할 때는 조건부 브레이크포인트(예: 특정 값일 때만 멈추기)도 활용한다.
1. 함수의 시작 지점
- 함수가 언제 호출되는지, 어떤 인자(argument) 가 들어오는지 확인하고 싶을 때.
- 특히 이벤트 핸들러, 콜백 함수, 재귀 함수는 주의 깊게 보는 게 좋음.
function calculatePrice(item) {
// 여기 브레이크포인트: item이 뭔지 보고 싶을 때
}2. 조건문(if/else) 진입 직전
- 특정 조건이 참인지 거짓인지 확인하고 싶을 때.
- 예상대로 분기되지 않을 때 유용.
if (user.age > 18) {
// 여기 브레이크포인트: 조건 통과 여부 확인
}3. 루프의 시작 부분
- 루프가 몇 번 도는지, 각 반복에서 변수의 상태가 어떤지 확인하고 싶을 때.
for (let i = 0; i < items.length; i++) {
// 여기 브레이크포인트: i나 items[i] 확인
}4. 오류가 발생하는 줄 직전
- 예상치 못한 값이 나오는 지점이나 에러가 터지는 줄의 한 줄 전.
- 너무 늦게 걸면 변수 값이나 흐름을 놓칠 수 있음.
5. return 직전
- 함수의 최종 반환 값이 맞는지 확인하고 싶을 때.
return finalResult; // 여기 브레이크포인트6. 데이터 변경 시점
- state, 변수, 객체의 값이 변경되는 라인.
user.name = "Alice"; // 여기 브레이크포인트: 바뀌는 값 확인