Debugger 사용하기

코딩하면서 예상치 못한 결과가 나왔을때 어디서부터 잘못된건지 궁금해질 때가 있다.
그때 사용하면 유용한게 Debugger이다.
브라우저의 검사창에있는 source탭에서 이용할 수 있고
브레이크포인트(중단점)을 코드내부의 줄넘버를 클릭해서 설정해줄수도 있고,
특정이벤트(ex 이벤트리스너- 클릭)등을 따로 설정해 줄수도있다.

버튼마다 함수까지진행, 함수로진입, 빠져나가기 등등이있는데 이건 사용하면서
익혀야 할듯하다.
콘솔창에서 사용해보려면 코드안에 debugger;를 입력해주고
해당함수를 실행시키면 바로 source창으로 이동해서 확인해볼 수 있다.

에디터에서 중단점을 설정하려면 원하는부분에
debugger; 라는 커맨드를 넣어서 멈추게 할 수도 있다.

F5를 눌러 재실행시키면 중단점에서 멈추는것을 확인할 수 있다.