Chrome 개발자 도구로 디버깅하기

Question

sunwoo0706 opened this issue 3 years ago · 0 comments

디버깅이란 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다.

개발자 도구를 열어 여러가지 탭 중에 sources 탭을 열면 다음과 같은 화면이 보이게 될 것 이다.

토글 버튼을 누르면 navgator가 열리면서 현재 사이트의 소스를 볼 수 있다.

sources 패널은 크게 세 개의 영역으로 구성된다.

이 상태에서 esc 키를 누르면 개발자 도구 하단부에 콘솔 창이 열린다.

단언컨데 디버깅에서 가장 중요하다.

위에서 말했던 코드 에디터 부분의 줄 번호를 클릭하면, 코드 중단점을 설정할 수 있다.

중단점은 말 그대로 자바스크립트의 실행이 중단되는 코드 내 지점을 의미한다.

중단점을 이용하여 실행이 중단된 시점에서 여러가지를 파악, 실행 가능하다. 디버깅 영역의 scope를 사용하여 중단된 시점에서 변수가 어떤 값을 담고 있는지 알 수 있으며, 명령어를 실행할 수 있다.

디버깅 영역의 break point를 통하여 중단점 목록을 쉽게 확인 가능하다.

조건부로 중단점을 설정할 수 있는데 줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 조건부 중단점(conditional breakpoint)이 생성된다. (이미 중단점이 설정되어 있는 경우 중단점을 삭제한 후 조건부 중단점을 설정할 수 있다.)

특정 줄에서 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열면 "Continue to here" 라는 옵션이 있다. 중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을때 아주 유용한 옵션이다.

debugger를 이용하면 개발자 도구를 열고 소스 코드 영역을 띄워 중단점을 설정하는 수고를 하지 않아도 된다.

Watch - 표현식을 평가하고 결과를 보여준다.
+ 버튼을 클릭해 표현식을 입력하고 Enter 키를 누르면 결과가 보여집니다. 입력한 표현식은 실행 과정 중에 계속하여 결과가 재평가된다.
Call Stack - 코드를 중단점으로 안내한 실행 경로를 역순으로 표시한다.
콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 포커싱하고, 변수 또한 재평가된다.
Scope - 현재 정의된 모든 변수를 출력한다.
Local 은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역애서도 확인할 수 있다.
Global 은 함수 바깥에 정의된 전역 변수를 보여준다.

Resume - 실행을 재개한다.
Step - 다음 명령어를 실행한다.
Step Over - 다음 명령어를 실행하되, 함수 안으로 들어가지 않는다.
Step Into - Step은 비동기 함수를 무시하는 반면, Step Into은 비동기 코드로 진입하고, 비동기 동작이 완료될 때까지 대기한다.
Step Out - 실행 중인 함수의 실행이 끝날 때 까지 실행을 계속한다.
모든 중단점 활성화/비활성화
예외 발생 시 코드 자동 중지 활성화/비활성화