추적하지 못했던 버그 — console.trace()가 구원한 순간
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 개발자, 중급 이상의 디버깅 경험자
핵심 요약
console.trace()는 함수 호출 스택을 추적하여 버그 원인을 빠르게 파악할 수 있음- 메서드 이름 충돌(shadowing)로 인한 호출 흐름 오류를 호출 스택 분석으로 해결
- 단순
console.log()대신console.trace()사용이 디버깅 효율성을 극대화
섹션별 세부 요약
1. 문제 발생
this.formatInput is not a function오류 발생- 기존 정상 작동 함수가 갑작스럽게 작동 중단
- 콘솔 로그로는 호출 경로 불명확
2. 디버깅 과정
- 브레이크포인트, 전체 로깅, 코드 롤백 등 전통적 방법 실패
- 메서드 이름 충돌 의심되나 정확한 호출 경로 파악 불가
3. `console.trace()` 도입
console.trace('Tracing formatInput call')삽입- 호출 스택을 통해
onInputChange→HTMLInputElement등 전체 흐름 추적 - 최신 컴포넌트에서 메서드 이름 충돌(shadowing) 발견
4. 결론 및 인사이트
console.trace()는 호출 흐름을 시각화하여 복잡한 버그 해결 가능- 단순 로깅보다 호출 스택 분석이 디버깅 효율성 향상에 기여
결론
console.trace()를 사용해 호출 스택 분석을 통해 복잡한 버그 해결console.log()대신console.trace()를 디버깅 전략에 포함할 것- 메서드 이름 충돌(shadowing)은 호출 흐름 분석으로 빠르게 탐지 가능