[자바스크립트] debugger 활용법

 자바스크립트 개발에 있어 불편한 점중 하나는 디버깅이 쉽지 않다는 것이다. 어디에서 문제가 발생했는지를 찾기 위해 변수를 console 로그에 찍어보기도 하고, 심지어 alert을 활용한다. 이렇게 값을 찍어보는 것만으로 디버깅을 하기에는 한계가 있다.

 

하지만 debugger문을 활용한다면 자바스크립트 코드도 실행 흐름을 따라가며 효과적으로 검증할 수 있다. 사용법은 아주 간단하다. 그저 검증하고 싶은 코드의 중간에 debugger문을 끼워넣기만 하면 된다. 이는 코드 실행시에 breakpoint가 된다. debugger문을 끼워넣은 위치에서 실행이 중단되고, 디버깅을 할 수 있게 된다.

 

예시를 통해 살펴보자.

 

function adder(paramA, paramB){

  debugger; //여기에 breakpoint를 찍어 디버깅
  
  let a = "";
  let b = "";
    
  let result = "";
  
  a = paramA;
  b = paramB;
  result = a + b;

  return result;
}

alert("덧셈 결과 : " + adder(3,5));

 

아주 간단한 코드이지만 실제로는 아주 복잡하고 긴 코드의 일부분이라고 가정해보자. 그리고 console이나 alert창으로 확인했을때 예상과는 다른 값이 나왔을 때, 도대체 어디서부터 잘못된건지 확인해야만 한다. parameter가 잘못 넘어온건지, 값 할당이 잘못된건지, 아니면 계산식이 잘못된건지 말이다.

 

이 경우 예시의 코드에서처럼 debugger문을 활용할 수 있다. 코드의 breakpoint를 찍고 싶은 위치에 debugger문을 끼워넣어준뒤, 개발자도구를 열어놓은 상태에서 스크립트를 실행시켜주기만 하면 된다. 본 예제는 크롬 브라우저에서 실행했다.

 

 

그러면 스크립트가 위와 같이 dubegger를 찍은 위치에서 실행을 멈춘다. 여기서 좌측 상단에 빨간 테두리로 표시해놓은 두 버튼을 주목하자. 오른쪽에 도돌이표처럼 생긴 버튼을 누르면 Line 단위로 실행하며 코드를 검증할 수 있다. 그 왼쪽 버튼은 현재 프로시저를 중단없이 실행하는 것인데, 디버깅을 할때는 주로 오른쪽 버튼을 활용하게 된다.

 

 

이제 디버깅 버튼을 누르며 한줄씩 코드를 실행해보자. 코드가 실행될때마다 각 변수에 할당되는 값이 우측에 표시된다. console로 일일이 찍어서 값을 확인해볼 필요가 없다. 실행 흐름을 쭉 따라가며 코드를 검증할 수 있는 것이다.

 

 

값이 할당된 변수에 마우스포인터를 가져다대면 할당된 값을 직접 확인할 수도 있다. 역시 굳이 콘솔로 찍어볼 필요가 없다.

 

개발자도구 오른쪽을 보면 더 다양한 정보가 제공된다. 특히 현재 실행흐름에서의 this가 무엇을 가리키는지 알 수 있기 때문에, 실수가 일어나기 쉬운 this문 활용에 대해 코드의 검증이 가능하다. (자바스크립트 this 활용법 참조)

 

 

그동안 console과 alert에 의존하여 자바스크립트는 "디버깅이 어려워!"라는 불평을 습관적으로 늘어놓았다면, 이제는 보다 강력한 debugger문을 활용하여 효율적으로 코드를 검증해보자.