크롬개발자도구로 디버깅하는 방법

개발자도구 디버깅 방법을 알기 전에는 console.log()나 alert()를 이용해 디버깅을 진행 했었다. 하지만 이 방법은 엄청난 노가다일 수 있으며 효율성이 매우 떨어진다고 한다. 따라서 크롬 브라우저의 개발자도구를 이용해 효율적으로 디버깅을 하는 방법을 알아보려고 한다.

1. 디버깅이란?

: 프로그래밍, 개발 중 오작동, 오류가 발생하는 것을 해결하는 것; 즉 코드에서 버그를 찾아 제거하는 것.

2. 크롬 개발자도구란?

: 크롬브라우저에 내장되어있는 개발자도구로 웹 애플리케이션을 개발하고 수정/최적화하는데 필요한 다양한 기능을 제공한다. 자바스크립트 디버깅, 모바일 기기 시뮬레이터, 네트워크 분석, 최적화 검사 등도 해준다.

cf) 개발자도구 여는 방법

1) F12

2) 우클릭 - 검사

3) 도구더보기 - 개발자도구

3. 디버깅할 때 사용하는 주요 패널들

1) Elements

: 주로 디자인을 수정하는 용도로 사용. html 코드 분석, DOM을 확인, CSS 스타일 수정 및 테스트가 가능하다.

2) Console

: 로그를 확인하고 스크립트 명령어 입력 가능. 중단점을 건 시점의 변수를 확인하고 값을 평가하거나 수정 가능하다.

3) Sources

: 자바스크립트 디버깅의 핵심적인 영역. 디버깅 정보창 위의 중단점 컨트롤 이용하여 디버깅이 가능하다.

4) Network

: 현재 페이지의 HTTP 요청과 응답 리스트와 타임라인 토큰 등 확인 가능.

4. 각 도구 상세 기능 설명

① BreakPoint : 중단점을 이용해 실행 중지된 시점에 변수가 어떤 값을 담고 있는지를 알 수 있으며, 실행이 중지된 시점을 기준으로 명령어 실행이 가능하다.

② Pause Script Execution(단축키: F8) : 스크립트 일시정지

③ Step Over Next Function Call : 다음 명령어 실행. 단 함수 안으로는 들어가지 않는다.

④ Step into Next Function Call : 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다. (Step는 비동기 동작 무시)

⑤ Step Out of Current Function : 현재 실행중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 멈춘다. (실수로 Step를 눌러 내부 동작을 알고 싶지 않은 중첩 함수로 진입했거나 가능한 빨리 함수 실행을 끝내고 싶을 경우 유용)

⑥ Step : 다음 명령어를 실행한다. 스크립트 전체를 문 단위로 하나하나 실행 가능하다.

⑦ Deactivate breakpoints : 모든 중단점을 일시적으로 활성화/비활성화 (실행에는 영향 없음)

⑧ Pause on excepoints : 활성화 되어있고 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다. 실행이 중단되었기 때문에 에러가 어디서 발생했는지 찾을 수 있다.

⑨ Scope : 현재 정의된 모든 변수 출력.

- local: 함수의 지역변수 (하위 항목에 this에 대한 정보도 함께 보여짐)

- Global: 함수 바깥에 정의된 전역 변수

⑩ Watch : 표현식을 평가하고 결과를 보여준다.

⑪ Call Stack : 코드의 중단점으로 안내한 실행 경로를 역순으로 표시

4. 실습 예제

1) https://github.com/subicura/javascript-debugging-example 다운로드 후

2) npm install, npm start

3) http://localhost:3000/vanilla.html 접속