크롬에서 개발자 도구를 실행
F12 [단축키]
이미지출처
자바스크립트 디버깅의 가장 핵심적인 영역입니다.
왼쪽에 파일 관리창과 가운데 소스 에디터, 오른쪽에 디버깅관련 정보창이 있습니다.
창의 크기에 따라 화면 레이아웃이 적절하게 바뀌고 토글 버튼을 누르면 세부창을 열었다 닫았다 할 수 있습니다.
원하는 위치에서 우클릭하여 BreakPoints를 추가해주고
해당 파란색 표시가 된 부분[BreakPoints]은 소스를 디버깅하게 되면 멈추게 되는 위치입니다.
F5 를 누르게 되면 소스가 진행되다가 해당 위치에서 멈추고 브라우저 상단에 컨트롤이 생깁니다. 상단에 있는 컨트롤을 이용해서 단계별로 소스를 진행하시면 됩니다.
오른쪽 탭에 있는 버튼들이 디버그할 때 사용할 버튼입니다.
각 버튼들의 역할
1. Step: 다음 명령어 실행다음 디버거를 만날 때까지 스크립트 실행을 계속한다. 디버거가 더 이상 없으면, 나머지 스크립트를 실행하고 끝난다.
- Step Over: 다음 명령어를 실행하되, 함수 안으로 들어가진 않음
Step은 함수 내부로 진입해 함수 본문 첫 번째 줄에서 실행을 멈추는 반면, Step Over는 함수를 실행하지만, 함수 내로 진입하진 않는다.
실행은 함수 실행이 끝난 후, 즉시 멈춘다. 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용하다.
- Step Into: 함수로 진입해 모든 작업을 한 줄씩 검사
Step은 비동기 동작은 무시하는 반면, Step into는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다.
- Step Out: 함수를 검사하고 해당 함수를 호출하는 라인으로 돌아감
현재 실행 중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 멈춘다. 빨리 함수 실행을 끝내고 싶은 경우에 사용한다.
- 모든 중단점(breakpoint)을 활성화/비활성화
모든 중단점을 일시적으로 활성화/비활성화한다(실행에는 영향이 없다).
- 예외 발생 시 코드를 자동 중지시켜주는 기능을 활성화/비활성화
활성화되어 있고, 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다. 실행이 중단되었기 때문에 변수 등을 조사해 어디서 에러가 발생했는지 찾을 수 있다. 개발하다가 에러와 함께 스크립트가 죽었다면 디버거를 열고 이 옵션을 활성화한 후, 페이지를 새로 고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있다.
디버깅에서 브레이크포인트를 거는 이유는 그 시점에서 변수들에 어떤 값이 들어가 있는지 확인하기 위해서 입니다.
다른 프로그램들과 마찬가지로 변수에 마우스를 가져가면 현재 시점에서의 값을 볼 수 있습니다.
내용 출처 : 자바스크립트 크롬 브라우저로 디버깅 하는 방법
내용 출처 : 기초-자바스크립트-디버깅-시작하기
