매번 console.log 를 통해서 디버깅을 하다보면, 잊어버리고 지우지 못한 console.log가 남기도 하고 원하는 값을 정확히 찾기위해서 매번 console.log를 찍어줘야하는 불편함이 있다.
그러니, 개발자로서 제대로 디버깅을 하는 방법을 알아보자 -! 🐛🐛
🛠 디버그 도구
계속 : 다음 브레이크 포인트로 바로 실행
건너뛰기 : 코드를 한 줄씩 실행하고, 다른 함수의 호출은 건너뛰면서 확인
들어가기 : 정의한 함수 안으로 들어감
나가기 : 현재 디버깅 하고 있는 함수를 끝내고 밖으로 나옴
다시시작 : 다시 디버깅 시작
종료 : 프로그램 실행 종료
🔍 데이터 검사
VARIABLES에서 Local, Global 데이터를 확인할 수 있다.
WATCH는 변수 및 표현식을 평가하고 볼 수 있다.
CALL STACK은 함수가 어떤 순서로 실행되었는지 확인할 수 있다.
LOADED SCRIPTS는 로딩된 모든 스크립트가 나타난다.
BREAKPOINTS는 걸어둔 모든 브레이크 포인트가 나타난다.
🍯 중단점 편집
그냥 중단점(breakpoint)을 거는 게 아니라 특정한 조건에 만족할 때만 브레이크 포인트가 동작할 수 있도록 설정할 수 있다. 내가 원하는 상태가 올 때까지 계속 클릭해서 실행하지말고, 조건을 사용해보자.
작전명 청춘 💫