Chrome 으로 디버깅하기

 

코어 자바스크립트 - Chrome 으로 디버깅하기 요약

 

디버깅(debugging)이란 ?  스크립트 내 에러를 검출해 제거하는 일련의 과정을 뜻함.

 

1. Sources 패널 

 

Sources 패널은 크게 세 개의 영역으로 구성됩니다.

1. 파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여줍니다. Chrome 익스텐션이 여기 나타날 때도 있습니다.
2. 코드 에디터 영역 – 리소스 영역에서 선택한 파일의 소스 코드를 보여줍니다. 여기서 소스 코드를 편집할 수도 있습니다.
3. 자바스크립트 디버깅 영역 – 디버깅에 관련된 기능을 제공합니다. 곧 자세히 살펴보겠습니다.

 

2. 콘솔과 중단점

Console

Esc를 누르면 개발자 도구 하단부에 콘솔 창이 열림. 또는 Sources 패널 왼쪽에 있는 Console 을 눌러도 됨.

여기에 명령어를 입력하고 Enter를 누르면 입력한 명령어가 실행되는데, 콘솔 창에 구문(statement)을 입력하고 실행하면 아랫줄에 실행 결과가 출력됨. 1+2를 입력하면 3이 출력되고, hello("debugger")를 입력하면 undefined가 출력!

 undefined가 출력되는 이유는 hello("debugger")가 아무것도 반환하지 않기 때문!

중단점

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

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있고, 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있음. 즉 디버깅이 가능해짐!

 

3. 디버깅 영역에서 중요한 것들

1. Watch – 표현식을 평가하고 결과를 보여줍니다.
   Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여줍니다. 입력한 표현식은 실행 과정 중에 계속해서 재평가됩니다.
2. Call Stack – 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시합니다.
   콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 휙 움직이고, 변수 역시 재평가됩니다. 'anonymous’를 클릭해 직접 확인해 봅시다.
   실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈췄습니다. 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치합니다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력됩니다.
3. Scope – 현재 정의된 모든 변수를 출력합니다.
   Global은 함수 바깥에 정의된 전역 변수를 보여줍니다.
   Local 하위 항목으로 this에 대한 정보도 출력되는데, 이에 대해선 추후에 학습하도록 하겠습니다.
   Local은 함수의 지역변수를 보여줍니다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있습니다.