Chrome 으로 기초 디버깅

 

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

모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓습니다. 

디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있습니다.

 

프론트에서도 디버깅이 중요하며, 이 글에서는 Chrome 브라우저에서 제공하는 디버깅 툴을 사용하도록 하겠습니다.

기능이 다양하고, Chrome 에 익숙해지면 다른 브라우저에서 지원하는 디버깅 툴을 쉽게 익힐 수 있기 때문입니다.

 

 

사용 방법

F12 또는 Cmd + Opt + I 를 눌러 개발자 도구를 엽니다.

Sources 탭을 클릭해 Sources 패널을 엽니다.

 

해당 open sources 버튼을 누르면 navigator 가 열리면서 현재 사이트와 관련된 파일들이 나열됩니다.

파일 목록에서 hello.js 를 클릭하면 아래 사진처럼 나오는 것을 볼 수 있습니다.

 

sources 패널

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

 

1. 파일 탐색 영역

페이지를 구성하는 데 쓰인 모든 리소스( HTML, JavaScript, CSS, 이미지 파일 등 ) 을 트리 형태로 보여줍니다.

 

2. 코드 에디터 영역

리소스 영역에서 선택한 파일의 소스 코드를 보여줍니다. 여기서 소스 코드를 편집할 수도 있습니다.

 

3. 자바스크립트 디버깅 영역

디버깅에 관련된 기능을 제공합니다.

 

테스트 파일로 테스트 하고 싶다면?

스니펫에 새로운 파일을 생성해서 테스트도 해보실 수 있습니다.

만약 스니펫 이라는 부분이 보이지 않는 다면 >> 버튼을 클릭해 보면 숨겨져 있을 가능성이 큽니다.

이 글에서는 스니펫을 만들어 테스트 해보겠습니다.

 

콘솔

ESC 를 누르면 개발자 도구 하단부에 콘솔 창이 열립니다.

여기에 명령어를 입력하고 Enter 를 누르면 입력한 명령어가 실행됩니다.

 

콘솔 창에 구문 을 입력하고 실행하면 아랫줄에 실행 결과가 출력됩니다.

 

중단점

디버깅을 시작해 봅시다.

아까 만든 Test 파일을 hello.js 로 변경을 한 뒤에 소스 코드 영역에 띄우고

네 번째 줄 코드 좌측의 줄 번호 4, 8 을 클릭합니다.

 

 

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

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있습니다.

또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있습니다. 디버깅이 가능해지는 것이죠.

 

조건부 중단점

줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 조건부 중단점을 설정할 수 있습니다.

 

디버깅 실행하기

하단에 Ctrl + Enter 을 누르거나 입력을 하면 디버깅이 시작되고 아래와 같은 사진이 나옵니다.

 

이렇게 오른쪽 부분을 보면서 실행이 중단된 부분에서 어떤 값과 전역, 지역 변수가 있는지 확인하실 수 있습니다.

 

호출 스택
코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시해 줍니다.

 

실행 추적하기

 

실행을 재개하면, 추가 중단점이 없는 경우 실행이 죽 이어지고 디버거는 동작하지 않습니다.

 

 

실행이 다시 시작되다가 함수 say() 안에 설정한 중단점에서 실행이 멈춥니다.

이 시점에서 우측의 호출 스택을 살펴보면 스택 최상단에 하나 더 추가된 것을 확인하실 수 있습니다.

 

요약

스크립트 실행이 중단되는 경우는 다음과 같습니다.

1. 중단점을 만났을 때

2. debugger 문을 만났을 때

3. 에러가 발생했을 때

 

스크립트 실행이 중지되면 중단 시점을 기준으로 변수에 어떤 값이 들어가 있는지 확인할 수 있습니다.

또한 단계별로 코드를 실행해 가며, 어디서 문제가 발생했는지 추적할 수도 있습니다. 이런 식으로 디버깅이 진행됩니다.

 

개발자 도구는 여기서 소개한 기능 이외의 다양한 기능을 지원합니다.

Google 에서 제공하는 개발자 도구 공식 메뉴얼은

 https://developers.google.com/web/tools/chrome-devtools 에서 확인할 수 있습니다.