자바스크립트-디버깅

디버깅은 스크립트 내 에러를 검출해 제거하는 과정을 의미한다. 디버깅 툴을 사용하면 디버깅이 쉬워지고 단계마다 어떤 일이 일어나는지 코드 단위로 추적할 수 있다.

 

Sources 패널

1. 파일 탐생 영역: 맨 왼쪽이고 페이지를 구성하는데 쓰인 모든 리소스를 트리 형태로 보여준다. Chrom 익스텐션이 나타날 수도 있다.

2. 코드 에디터 영역: 리소스 영역에서 선택한 파일의 소스 코드를 보여주고 편집도 가능하다. 중단점을 선택할 수 있다.

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

 

debugger 명령어

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

  debugger;  // <-- 여기서 실행이 멈춥니다.

  say(phrase);
}

이렇게 debugger 명령어를 사용하면 중단점을 설정한 것과 같은 효과가 있다.

 

멈추면 보이는 것들

1. watch: 표현식을 평가하고 결과를 보여준다. + 버튼을 클릭해 원하는 표현식을 입력하고 enter를 누르면 중단 시점의 값이 보여진다. 입력한 표현식은 실행 중에 계속 재평가된다.

2. call stack: 코드를 해당 중단점으로 안내한 실행 역순으로 표시한다. hello 함수를 정의하지 않아서 콜 스택 하단엔 anonymous가 출력된다. 콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 움직인다.

3. scope: 현재 정의된 모든 변수를 출력

 

실행 추적하기

1. Resume: 스크립트 실행을 다시 시작함(f8)

실행을 재개한다. 추가 중단점이 없으면 실행이 이어지고 디버거는 동작하지 않는다.

 

실행이되다가 say 함수 안에 중단점에서 실행이 다시 멈춘다.

 

2. Step: 다음 명령어를 실행함(f9)

다음 문을 실행한다.

 

3. Step over(f10): 다음 명령어를 실행하지만 함수로 들어가진 않는다.

Step와 유사하지만 함수 내부로 들어가지 않는다. 함수 호출 시 내부에 어떤 일이 일어나는지 궁금할 때 사용한다.

 

4. Step into(f11)

Step와 유사하지만 비동기 함수 호출에서는 다르게 작동한다.

 

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

 

5. Step out(shift+f11): 실행 중인 함수의 실행이 끝날 때 까지 실행을 계속한다.

현재 실행 중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 멈춘다. 실수로 함수 내부에 들어갔거나 함수 실행을 빨리 끝내고 싶은 경우

 

6. 모든 중단점을 활성화/비활성화

실행에는 영향이 없다.

 

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

활성화되어 있고 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다. 그리고 실행이 중단되어서 변수 등을 조사해 어디에 에러가 생겼는지 찾을 수 있다. 개발하다가 에러와 함께 스크립트가 죽었으면 디버거를 열고 활성화하여 페이지를 새로 고침하면 에러가 난 곳을 알 수 있다.

 

• Continue to here 옵션

디버깅 중에 특정 줄에서 마우스 오른쪽을 클릭하면 Continue to here 옵션이 나온다.

=>중단점을 설정하기 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 유용

 

Console.log

// 콘솔창을 열어 결과를 확인해 보세요.
for (let i = 0; i < 5; i++) {
  console.log("숫자", i);
}

이 코드의 결과는 콘솔에만 있어서 일반 사용자는 볼 수 없다. 코드에 consol.log를 적절히 넣었으면 디버거 없이 무슨 일이 일어나는지 파악 가능하여 console.log와 디버거를 적절히 활용해야한다.