Chrome으로 디버깅(debugging) 하기

디버깅(debugging)

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

(쉽게 말해서 에러를 잡는 것)

 

디버깅 툴(debugging tool)

• 디버깅을 도와주는 도구
• 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적

Chrome의 개발자 도구

(1)소스(sources) 패널

ㄴ 탐색기 

: 누르면 현재 사이트와 관련된 파일들이 나열된다(open sources)

 

ㄴ 3가지 영역

 

❶ 파일 탐색 영역 : 페이지를 구성하는 데 쓰인 모든 리소스를 트리 형태로 보여준다

❷ 코드 에디터 영역 : 

• 리소스 영역에서 선택한 파일의 소스 코드를 보여준다
• 소스 코드를 편집할 수도 있다

❸ 자바스크립트 디버깅 영역 : 디버깅 관련 기능 제공

 

 

(2)콘솔(console)

• 개발자 도구에서 ESC를 누르면 개발자 도구 하단부에 콘솔 창이 열린다
• 콘솔 창에 구문(statement) 입력

 

(3)중단 점(breakpoint) 

• 디버깅 영역에서 중단점 목록 확인
• 자바스크립트의 실행이 중단되는 코드 내 지점
• 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다

 

파일 여러개에 다수의 중단 점 설정

• 해당 중단 점이 설정된 곳으로 바로 이동
• 체크 박스를 해제해 비활성화
• remove breakpoint(마우스 오른쪽 버튼) 옵션을 사용해 중단 점 삭제

 

조건부 중단 점(conditional brakpoint)

• Add conditional brakpoint 에 표현식을 입력하면 true 인 경우에만 중지 시킬 수 있다
• 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 쓸 수 있다

 

(4)debugger 명령어

• debugger 명령어를 적어주면 중단 점을 설정한 것과 같은 효과를 본다
• 위의 진행들을 안하고 중단 점을 설정할 수 있는 편리함

let hello = (name) => {
let phrase = `Hello, ${name}!`;

debugger;
say(phrase);
}

 

멈추면 보이는 것들

• Cmd + R : 새로고침
• 디버깅 영역의 하위 패널

❶ 감시(watch) : 

표현식을 평가하고 결과를 보여준다

+(add expression) 클릭 후 원하는 표현식을 입력하면 중단 시점의 값을 보여주고 실행 과정 중에 계속해서 재평가 된다

 

❷ 호출 스택(call stack) :

코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시

(1)index.html 안에서 hello() 를 호출하는 과정 중 멈춤

(2)함수 hello 내에 중단점을 설정했기 때문에 최상단에 hello가 위치

(3)index.html 에서 함수 hello를 정의하지 않았기 때문에 호출 스택 하단엔 익명(anonymous)가 출력된다

 

❸범위(scope) : 현재 정의된 모든 변수를 출력한다

ㄴ 로컬(local) : 

ㄴ 함수의 지역변수를 보여준다

ㄴ 지역 변수 정보는 소스 코드 영역에서도 확인 할 수 있다

ㄴ this 에 대한 정보도 출력

ㄴ 전역(global) : 함수 바깥에 정의된 전역 변수를 보여준다

 

실행 추적하기

resume : 

ㄴ Cmd + \

ㄴ 스크립트 실행을 다시 시작함

ㄴ 추가 중단점이 없는 경우엔 실행이 이어지거 디버거는 동작X

step : 

ㄴ F9

ㄴ 다음 명령어를 실행함

ㄴ 계속 누르면 스크립트 전체를 문 단위로 하나하나 실행 가능

ㄴ 함수 내부로 들어가 함수 본문 첫번째 줄에서 실행을 중단

 

step over : 

ㄴ Cmd + ‘

ㄴ 다음 명령어를 실행하되, 함수 안으로 들어가진 않음

ㄴ 다음 문이 함수 호출일 때 직접 작성한 함수일 때만 동작이 다르다

ㄴ 보이지 않는 곳에서 중첩 함수를 실행 하지만 함수 내로 진입X

ㄴ 함수 실행이 끝난 후에 즉시 멈춘다

 

step into :

ㄴ Cmd + ;

ㄴ 비동기 함수 호출에서 step과 다르게 실행

ㄴ 비동기 동작을 담당하는 코드로 진입

ㄴ 필요에 따라 비동기 동작 완료까지 대기

 

step out :

ㄴ Cmd + Shift + ⬆️

ㄴ 함수의 실행이 끝날 때 까지 실행을 계속함

ㄴ 실수로 step 을 눌러 중첩 함수로 집입 했거나, 빨리 끝내고 싶을 때 유용

 

중단점 비활성화 :

ㄴ 모든 중단점을 일시적으로 활성화/비활성화 한다(실행에는 영향X)

 

예외에서 일시중지됨 :

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

ㄴ 에러와 함께 스크립트가 죽었다면 디버거를 열어 이 옵션을 활성화 해라

ㄴ 페이지를 새로고침 한 후 에러가 발생한 곳과 시점의 맥락을 확인가능 

 

console.log

• console.log(function) 은 원하는 것을 콘솔에 출력
• 결과는 콘솔 창에 있다

for (let i = 0 ; i < 5 ; i++) {
console.log(‘숫자’, i); // 0, 1, 2, 3, 4
}

 

스크립트의 중단

• 중단점(breakpoint)를 만났을 때
• debugger 명령어를 만났을 때
• 에러가 발생했을 때(=예외에서 일시중단 버튼이 활성화되어있는 경우)

 

• 스크립트 중단 ➡️ 변수에 할당된 값 확인 ➡️ 단계별로 코드 실행 ➡️ 에러 발생 시점 추적 

• 공식 메뉴얼을 확인하자