20. chrome 개발자 도구 디버깅 방법

꼭 사용해야 하는 건 아니지만, chrome 개발자 도구를 잘 알아두면 디버깅에 많은 도움이 된다.

‘Sources’ 패널

• Chrome을 사용해 페이지를 연다.
• F12(MacOS: Cmd+Opt+I)를 눌러 개발자 도구를 연다.
• Sources 탭을 클릭 패널(panel)을 연다.
• Open file을 클릭
•  

  

• 해당하는 파일을 클릭한다.
• 토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일들이 나열된다.

• 

• 파일 목록에서 디버깅 하려는 js 파일을 클릭

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

1. 파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여준다.
   1. Chrome 익스텐션도 여기에 표시된다

   2. 

2. 코드 에디터 영역 – 리소스 영역에서 선택한 파일의 소스 코드를 보여준다. 여기서 소스 코드를 편집할 수도 있다.
   1. 수정한 내용이 영구적으로 저장되지는 않는다.

3. 자바스크립트 디버깅 영역 - 디버깅에 관련된 기능을 제공 

콘솔(Console) 탭

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

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

 

중단점(breakpoint)

js파일을 소스 코드 영역에 띄우고 코드 좌측의 줄 번호를 클릭하면 중단점을 추가할 수 있다.

줄 번호 에 마우스 커서를 옮긴 후 클릭해야 한다.

클릭한 줄 번호가 파란색으로 바뀐다

중단점(breakpoint) 으로 자바스크립트의 실행이 중단되는 코드 내 지점을 설정할 수 있다.

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

또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.

디버깅 영역에서는 중단점 목록을 확인할 수 있다.

파일 여러 개에 다수의 중단점을 설정해 놓은 경우, 디버깅 영역을 이용하면 아래와 같은 작업을 할 수도 있다.

• 항목을 클릭해 해당 중단점이 설정된 곳으로 바로 이동
• 체크 박스 선택을 해제해 해당 중단점을 비활성화
• 마우스 오른쪽 버튼을 클릭했을 때 나오는 ‘Remove breakpoint’ 옵션을 통해 중단점 삭제

조건부 중단점

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

Add conditional breakpoint를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참인 경우에만 실행을 중지시킬 수 있다.

조건부 중단점을 설정하면 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있다.

debugger 명령어

아래 예시처럼 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 줄 수 있다.

function hello(name) {
	let phrase = `Hello, ${name}!`;  
	debugger;  // <-- 여기서 실행이 멈춘다.
	say(phrase);
}

debugger 명령어를 사용하면 에디터를 떠나지 않고도 중단점을 설정할 수 있다.

 

중단점 사용하기

중단점을 설정한 상태에서 새로 고침 단축키 F5(Windows, Linux 사용자)나 Cmd+R키(MacOS 사용자)를 누르면 페이지가 다시 열리면서 중단점에서 로딩이 멈춘다.

이 상태에서 디버깅 영역의 ▼를 클릭해 하위 패널들을 하나씩 펼쳐서 정보를 확인할 수 있다.

• 내용이 다보이지 않는다면 개발자 화면 영역을 키운다
• 디버거 영역이 오른쪽으로 이동하면서 항목들이 모두 보이게 된다.

1. Watch – 표현식을 평가하고 결과를 보여준다.
   1. Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다. 입력한 표현식은 다음 중단점으로 넘어가면서 계속해서 재평가된다.
   2. 현재 시점에서 phrase의 값을 본 경우

2. Call Stack – 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다. 예시에서는 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치한다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력된다.

1. 콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 이동하고, 변수 역시 재평가된다. 
2. 실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈춘 상태이다.

3. Scope – 현재 정의된 모든 변수를 출력한다.

Local은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역에서도 확인할 수 있습니다.

Global은 함수 바깥에 정의된 전역 변수를 보여준다.

Local 하위 항목으로 this에 대한 정보도 출력된다.

 

실행 추적하기

실행 단계마다 어떤 일이 일어나는지 추적 하는 법

– ‘Resume’: 스크립트 실행을 다시 시작함 (단축키 F8)

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

이 시점에서 우측의 'Call Stack’을 살펴보면 스택 최상단에 콜(say)이 하나 더 추가된 것을 확인할 수 있다.

현재 실행은 say() 안에 멈춰있다. 

 

– ‘Step’: 다음 명령어를 실행함 (단축키 F9)

다음 문 실행. Step 버튼을 누르면 스크립트 전체를 문 단위로 하나씩 실행할 수 있다. 

– ‘Step over’: 다음 명령어를 실행하되, 함수 안으로 들어가진 않음 (단축키 F10)

'Step’과 유사하지만, 다음 문이 함수 호출일 때 'Step’은 함수 내부로 들어가 함수 본문 첫 번째 줄에서 실행을 멈춘다. 반면 'Step over’는 함수 내로 진입하지 않고 함수를 바로 실행한다. 'Step over’은 함수 호출 시 내부에서 일어나는 일은 알 필요가 없을 때 사용한다.

– ‘Step into’ (단축키 F11)

'Step’과 유사한데, 'Step’은 setTimeout(함수 호출 스케줄링에 쓰이는 내장 메서드)같은 비동기 동작은 무시하지만, 'Step into’는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다.

– ‘Step out’: 실행 중인 함수의 실행이 끝날 때 까지 실행을 계속함 (단축키 Shift+F11)

현재 실행 중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 멈춘다. 

– 모든 중단점을 활성화/비활성화

모든 중단점을 일시적으로 활성화/비활성화 한다.

– 예외 발생 시 코드를 자동 중지시켜주는 기능을 활성화/비활성화

개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다.

어디서 에러가 발생했는지 찾을 수 있다. 개발하다가 에러가 발생해 스크립트가 중지되면 디버거를 열고 이 옵션을 활성화한 후, 페이지를 새로 고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있다.

Continue to here 옵션

특정 줄에서 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴를 열면 "Continue to here"라는 옵션을 볼 수 있다.

중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 유용한 옵션.

console.log

console.log 함수를 이용하면 원하는 것을 콘솔에 출력해서 확인할 수 있다.

아래 예시를 실행하면 콘솔창에 0부터 4까지 출력.

// Console 탭에서 확인할 수 있다.

for (let i = 0; i < 5; i++) {
  console.log("숫자", i);
}

결과는 콘솔창에만 있기 때문에 일반 사용자는 결과를 볼 수 없다.

코드에 console.log를 적절히 사용하면, 디버거 없이도 무슨 일이 일어나고 있는지 파악할 수 있다.

요약

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

1. 중단점을 만났을 때
2. debugger문 만났을 때
3. 에러가 발생했을 때(개발자 도구가 열려있고 활성화되어있는 경우