자바스크립트 중단점을 활용한 디버깅 방법

자바스크립트는 계속해서 그 영역을 확장하고 있죠. 점점 더 빠르게 발전하고 있으며 이는 서버의 복잡한 연산을 최대한 줄이고 가급적 프론트 영역에서 처리하는 일들이 가히 많아졌기 때문입니다. 물론 효과적인 자바스크립트 도구들이 등장한 것도 빼놓을 수 없습니다.

! 자바스크립트의 디버깅 사용하기

서버는 물론 프론트 영역의 디버깅도 매우 중요합니다. 특히 자바스크립트를 사용하여 코드를 짜는 과정에서 다양한 방법의 디버깅 방법이 사용될 수 있습니다. 이를 통해 예상되는 프로그래밍 결과를 확인하고 잘못된 부분이나 확인이 필요한 부분을 검증할 수 있습니다.

아래는 자바스크립트 코드를 디버깅(debugging)하는 간단한 방법들 중 브라우저를 활용하는 방법입니다. 각각의 브라우저마다 차이가 있지만 비슷한 부분들이 많습니다. 여기서는 크롬 브라우저를 사용하도록 하겠습니다. 크롬 브라우저의 경우 페이지 로딩 및 디버깅 속도가 상대적으로 빠른 수준으로 디버깅 목적으로 많이 쓰입니다.

# 브라우저 개발자 환경에서 중단점(breakpoint) 사용하기

특정 기능을 수행하는 스크립트 코드를 작성하였다고 가정해봅니다. 꼭 문제가 발생하였다고 디버깅을 수행하는 것만은 아니죠. 코드를 검증하고 테스트하는 과정에서 미리 중단점을 설정하여 디버깅하는 것 역시 생각해볼 수 있습니다. 기능 단위로 구현하는 경우가 많으므로 하나의 기능이 끝날 때마다 여러가지 테스트, 디버깅이 필요할 수 있습니다.

여기서 중단점(Breakpoint)은 스크립트의 동작을 잠시 멈추도록하여 디버깅이 가능하게 해줍니다. 이때 원하는 위치에 중단점을 설정하여야 하는데 중단점을 추가하는 방법은 아래와 같이 두 가지 방법을 사용합니다.

i. 작성한 코드의 필요한 부분에 debugger 키워드를 추가하기
ii. 브라우저의 개발자도구의 소스 코드에 설정하기

여기서 첫 번째 방법은 코드에 직접 debugger;라는 코드를 추가하는 방법입니다. 개발을 하는 도중 필요하다고 판단 즉시 코드를 추가하므로 빠르고 간단한 방법입니다. 다만 어플리케이션을 재시작해야 한다는 단점이 있습니다. 빌드, 번들링 등의 과정이 필요하다면 다음 방법이 더 좋을 수 있습니다.

다음은 브라우저에 나타나는 소스에서 중단점을 설정하는 방법입니다. 자세한 방법은 아래에 있으니 참고하시기 바라며 이 방법의 장점은 재시작, 빌드 없이 바로 마우스를 사용해 원하는 곳에 설정할 수 있다는 점입니다.

! 코드에 debugger 추가하기

첫 번째 방법인 코드의 중간에 debugger를 넣을 경우 스크립트가 실행되면서 debugger를 만나게 되면 해당 위치에서 코드 실행이우 중단됩니다. 이때 반드시 개발자 도구가 열려 있어야 합니다. 즉 debugger를 만난다고 자동으로 브라우저 개발자 도구가 실행되지는 않으니 주의하세요.

예를들어 만약 아래의 예제처럼 testVal 변수가 선언된 부분에 debugger 코드를 추가해보려고 합니다.

2번 라인에 추가가 되었군요. 이제 스크립트가 실행되는 과정에서 debugger를 만나면 코드가 일시정지, 중단될 것입니다.  상태에서 마우스를 testVal 위치에 오버하면 어떤 값이 할당되었는지 툴팁이 나타나 확인이 가능합니다.

위 예제는 단순하게 변수에 숫자 타입의 값을 설정하였지만 복잡한 연산 및 다른 함수를 사용하여 리턴 받는 경우 의도한 대로 설정되었는지 아니면 어떤 부분에 문제가 있는지 확인이 가능하게 됩니다.

! 디버깅에서 다음, 이전 등등 기능 알아보기

브라우저에서 화살표를 클릭하면 바로 다음 단계로 이동하게된다. 또한 단축키를 사용하는 방법도 있다.

@ 단축키를 사용하기
자주 사용되는 주요한 단축키입니다.

F8 - 중단점을 그만하고 코드 계속 실행하기

F10 -  다음 함수 코드로 이동하기

F11 -  함수의 내부 코드로 이동

F11 + Shift - 현재 함수에서 빠져나와 다음 함수로 이동하기


위 단축키를 보면 F10키를 누를 경우 다음 실행 코드의 이동(Step over)하며 F11 키를 사용하면 해당 함수의 내부로 이동(Step into)한다. 계속해서 디버깅이 필요한 경우 사용한다. 만약 모두 확인하여 디버깅을 종료할 경우라면 F8 을 누르고 중단 또는 다음 중단점으로 이동할 수 있습니다.

! 개발자 도구 및 콘솔창을 이용

중단점이 실행된 상태에서는중단된 상태의 영역, 즉 해당 스콥(scope)에 접근할 수 있습니다. 이는 전역범위가 아닌 지역범위의 내부 참조가 가능하다는 의미입니다.

예를들어 현재 중단점의 위치가 특정한 내부함수라고합니다. 이 경우 함수 내부에서만 참조 가능한 변수값을 콘솔에 입력할 경우 콘솔에서 바로 해당값이 반환된다. 다시 말해 해당 스코프 영역의 값에 접근이 가능하다는 의미입니다.

만약 중단점이 내부 함수 안이라면 내부의 데이터, 변수등을 콘솔에서 확인 가능
이를 활용하여 다양한 디버깅, 테스트가 가능합니다. 만약 중단점을 마치게 될 경우는? 당연히 더 이상 해당 스코프 영역에 접근할 수 없습니다.

! 콘솔 영역에서 this가 동작하지 않는 경우

만약 콘솔에서 this 값이 undefined 되는 경우가 나타날 수 있습니다. 예를들어 코드 상으로 접근 가능한 스코프 영역임에도 console 영역에 타이핑 할 경우 undefined로 나타날 수 있는데요...

@ 콘솔에서는 왜 이런 문제가 생길까요?
마우스를 가져다되면 값이 잘 나타나지만 콘솔에서는 없는 값으로 나옵니다.. 왜 그럴까요? 그 이유 중 하나가 브라우저의 Cleaning 작업입니다. 즉 브라우저는 모든 코드를 동작하기 이전에 필요한 부분과 불필요한 부분을 선택해 동작하고 값을 저장합니다. 즉 실행 이 전에 미리 판단하는 것입니다. 이런 부분은 실제로 디버깅 과정에서 발견할 수 있는데 만약 이렇게 동작하는 게 싫다면 어떻게 할 수 있을까요?

여러 방법을 알아봤지만 브라우저의 설정 및 간단한 조치 만으로는 어렵습니다. 다만 브라우저에서 Cleaning이 이뤄지지 않도록 코드를 작성하는 개발 방법이 존재하는데 콘솔 확인을 위해 코드를 모두 변경하는 건 리소스 등의 낭비도 클 것 같죠.

그래서 이런 경우 해결을 위해 우측 영역의 메뉴가 참고하면 도움이 될 수 있습니다. Thread, Watch, Call Stack 등등 동작 과정을 나타내는 다양한 화면이 존재하는 데 이 곳의 Scope를 보면 사용(테스트)하려는 변수 등의 정보가 담겨있습니다. 또한 클로저 여부 등도 나타나고 찾으려던 this가 _this 등의 키워드를 사용해 따로 저장되어 있을 수도 있죠. 즉 콘솔창에 this가 아닌 _this등을 사용하면 접근할 수 있으니 알아두면 좋은 방법입니다.

! 개발자 도구의 코드에 중단점 설정하기

개발자도구에는 다양한 메뉴가 존재하는데 여기서 코드를 선택할 경우 브라우저에서 작성된 소스에 접근 및 확인 할 수 있습니다. 이때 직접 디버깅할 코드를 찾아 해당하는 라인의 좌측 영역을 클릭하면 중단점을 설정 할 수도 있습니다. 이는 코드에 debugger를 넣은 것과 동일하게 동작하죠. 방법의 차이만 있을 뿐입니다.


중단점 설정은 하나만 가능한게 아니라 동시에 여러 개를 설정 하는 것이 가능하다. 다수의 중단점이 설정된 경우에  F8 을 누르면 어떻게 될까요? 다음 설정된 중단점을 찾아 또 다시 중단되어 나타나게됩니다.

# 마치면서

여기까지 간단하게 자바스크립트 디버깅 방법에 대하여 알아보았습니다. 자바스크립트를 비롯하여 모든 언어를 사용해 개발할 경우 디버깅과 코딩의 연속이므로 더 나은 방법, 더 좋은 방법의 디버깅을 사용하는 것이 매우 중요하겠습니다.