현재 나는 JavaScript까지밖에 할줄 모르니,, 자바스크립트를 디버깅하는 방법에 대해 정리해보려고한다.
자바스크립트를 디버깅하려면 먼저 자바스크립트의 실행 환경에 대해 알아야한다.
JavaScript 실행 환경
자바스크립트는 원래 웹 브라우저에서 동작하도록 설계된 언어이다.
그러나, 시간이 지나 Node.js가 등장 하며 브라우저 밖에서도 실행할 수 있게 되었다.
현재 자바스크립트는 브라우저 혹은 Node.js 위에서만 실행된며, 다른 환경(예: Python, Java 실행환경)에서는 동작하지 않는다.
1) 브라우저
자바스크립트는 Google Chrome, Firefox, Safari 등 과 같은 웹 페이지에서 실행 가능하다.
브라우저는 JavaScript가 실행될 수 있도록 다음과 같은 기능을 제공하기 때문이다.
- DOM(Document Object Model) : HTML과 CSS를 제어할 수 있게 한다.
- Window 객체 : 브라우저 창에 접근할 수 있는 객체.
- Fetch API : HTTP 요청을 보낼 수 있다.
자바스크립트 내에서 document. 혹은 window. 으로 실행하는 메서드들이 브라우저에 속해있다고 보면 된다.
+) 참고 : DOM TREE
따라서, document나 window로 시작하는 코드는 Node.js 환경에선 실행되지 않는다.
2) Node.js
Node.js는 브라우저와는 다른 자바스크립트 실행 환경으로, 주로 서버 개발에 사용된다.
Node.js는 다음과 같은 기능을 제공한다.
- 파일 시스템 (fs) : 파일 읽기/쓰기 가능.
- 네트워크 요청 처리 : 서버와 클라이언트 간의 데이터 송수신.
- 모듈 시스템 (reauire) : 외부 모듈 사용 가능.
예를 들어, fs.writeFileSync() 와 같은 메서드는 브라우저환경에선 실행되지 않는다.
그렇기 때문에 브라우저와 Node.js 각각 디버깅하는 방법을 따로 제공하고 있다.
브라우저는 콘솔창에서, Node.js에서는 사용하는 프로그램 툴을 통해 디버깅 할 수 있다.
디버깅이란?
디버깅(Debugging)은 프로그램에서 발생하는 버그(Bug)(오류)를 찾아 수정하는 과정을 말한다.
디버깅 과정에서는 코드의 논리적 문제나 실행 시 발생하는 오류를 확인하고, 코드가 의도대로 작동하도록 수정한다.
중단점이란?
중단점(Breakpoint)은 디버깅 도구에서 프로그램 실행을 특정 지점에서 멈추도록 설정하는 기능이다.
중단점을 사용하면 코드의 특정 부분에서 실행을 멈추고,
프로그램의 상태(변수 값, 호출 스택 등)를 실시간으로 확인할 수 있다.
Visaul Studio Code에서 디버깅하기
VS Code에서 중단점을 설정하고 사용하는 순서는 다음과 같다.
1) 중단점 설정
중단점을 찍고 싶은 코드 옆에 마우스를 가져다대면 빨간색 점이 생긴다.
이것이 중단점인데, 코드에 포커스 된 상태에서 단축키 F9 를 누르면 중단점이 설정된다.
만약 따로 중단점을 찍어서 확인하고 싶은 것이 아니라 오류가 발생한 지점을 확인하고 싶은 것이라면,
실행 및 디버그를 클릭했을 때, 패널 하단에 존재하는 중단점에서 원하는 종류의 오류를 선택한 뒤 디버깅하면 된다.
**catch문으로 선택된 예외와 catch문으로 처리하지 못했는데 발생한 오류가 기본 설정되어있다.**
2) 디버깅 모드 실행
좌측 활동 바에서 실행 및 디버그(Run and Debug) 아이콘을 클릭한다.
** 디버깅 설정이 없는 경우, "Create a launch.json file"을 선택하여 디버깅 환경을 설정.
(보통 JavaScript의 경우 자동 생성된다) **
+Tip) vscode 좌측 활동 바 단축키 모음
3) 디버거 선택
실행 및 디버그를 클릭하면 VS Code 상단에 디버거 선택창이 활성화 된다.
이 곳에서 디버깅할 환경을 선택할 수 있다.
"Start Debugging( F5 )" 버튼을 클릭하면 실행 및 디버그를 클릭하지 않고 바로 디버거 선택창을 활성화 시킬 수 있다.
나는 현재 Node.js 환경에서 테스트 하고 있으므로 Node.js를 선택하였다.
4) 중단점 확인
디버거를 선택하면 프로그램이 실행되며 중단점에 도달했을 경우 실행이 멈추고 현재 상태를 확인할 수 있다.
➡ 변수( Variables )
: 디버깅 시점에서 선언된 변수들의 현재 상태(값)을 보여준다.
● 로컬(Local) 변수 : 현재 함수나 블록 내에서 선언된 변수 표시
● 전역(Global) 변수 : 스코프 전체에서 접근 가능한 전역 변수 표시
● this 객체 : 현재 컨텍스트에서의 this 값 표시
➡ 조사식 ( Watch )
: 특정 변수를 추적할 수 있는 기능을 제공한다.
우측 상단의 + 버튼을 클릭하여 변수나 조건식을 입력하면,
입력한 값을 디버깅 중 계속 확인할 수 있다.
이때, 조사식은 값으로 평가되는 표현식만 사용가능하다.
● 표현식(Expression : 값을 반환한다.
( ex. 2 + 3 )
● 문(statement) : 실행동작을 수행하지만 값을 반환하지 않음
( ex. if, for while 같은 제어구조 )
➡ 호출 스택 ( Call Stack )
: 함수 호출의 순서를 보여준다.
현재 실행 중인 함수가 어떤 함수에 의해 호출되었는지 추적할 수 있다.
호출 스택안의 목록에서 가장 하단의 스택이 첫번째로 실행된 스택이며, 가장 상단이 마지막으로 실행된 스택이다.
디버깅 시 스택 내의 다른 함수로 이동하여 상태를 확인할 수 있다.
➡ 로드된 스크립트 ( Loaded Script )
: 디버깅 중 로드된 모든 자바스크립트 파일을 표시한다.
➡ 중단점 ( Breackpoints )
: 실행된 중단점의 목록을 보여준다.
개별 중단점을 활성화/비활성화 할 수 있으며, 특정 조건이 충족될 때 멈추는 조건도 설정 가능하다.
➡ 디버그 콘솔 ( Debug Console )
: 하단의 디버그 콘솔창에서 프로그램의 실행 상태를 실시간으로 제어하거나 콘솔 로그를 확인 할 수 있다.
5) 단계별 실행
VS Code 상단의 버튼을 클릭하거나 단축키를 클릭하면 단계별로 실행 과정을 살펴 볼 수 있다.
이미지 왼쪽에서부터 순서대로 다음과 같다.
▶ 계속 ( F5 )
중단점에 멈춰있던 프로그램을 계속 실행시킨다.
다음 중단점이나 프로그램 종료 시점까지 실행된다.
함수 내부로 들어가거나 세부 단계를 신경쓰지 않기 때문에, 전체 흐름을 빠르게 진행할 때 유용하다.
↷ 단위 실행 ( F10 )
단위 실행을 클릭 시, 현재 줄을 실행하고 다음 줄로 이동한다.
함수 호출이 있더라도 함수 내부로 들어가지 않고 실행을 건너뛴다.
다음 중단점까지가 아니라 바로 다음 실행 단계로 넘어가는 것이기 때문에 F5 보단 세부적이지만,
실행된 코드안의 세부 함수까지 확인하지 않기 때문에, 함수의 결과 값만 확인하고 싶을 때 유용하다.
⬇ 단계 정보 ( F11 )
함수 내부로 들어가서 세부적으로 디버깅한다.
함수의 동작을 확인하고 싶을 때 사용한다.
⬆ 단계 출력 ( Shift + F11 )
함수 내부 디버깅 중 현재 함수 실행을 종료하고 호출한 위치로 돌아간다.
함수 내부에서 더 이상 디버깅이 필요 없을 때 사용한다.
↺ 다시 시작 ( Ctrl + Shift + F5 )
실행 초기로 돌아가 처음 단계부터 다시 시작한다.
⏹ 중지 ( Shift + F5 )
모든 디버깅을 중지하고, 디버거를 종료시킨다.
브라우저에서 디버깅하기
브라우저에서는 개발자 도구을 통해 디버깅 할 수 있다.
- Windows / Linux 개발자 도구 단축키 : F12 또는 Ctrl + Shift + I
- Mac 개발자 도구 단축키 : Cmd + Option + I
1) 소스(Sources) 탭 이동
개발자도구 상단의 메뉴에서 확인가능한 소스(Sources) 탭은
브라우저에서 실행중인 JavaScript 코드를 확인하고, 중단점을 설정할 수 있는 공간이다.
바로 소스 탭으로 이동하여 원하는 파일을 선택하여 디버깅해도 되고,
원하는 디버깅 위치를 선택할 수도 있다.
요소 탭에서 원하는 요소에 적용된 자바스크립트 파일을 열기 위해서는 다음과 같이 클릭하면 된다.
요소 클릭 → 우측 이벤트 리스너 클릭 → 원하는 이벤트가 적용된 js 파일 클릭 → 소스 탭으로 자동 이동** 예시로 가져온 챗지피티씨,,
2) 파일 열기
소스 탭 좌측 페이지에서 현재 브라우저에서 실행된 파일들을 확인할 수 있다.
이곳에서 파일을 확인하고 디버깅하고싶은 파일을 선택한다.
3) 중단점 선택
파일이 선택되어 있다면 중앙에 코드가 표시된다.
중단점을 설정하려는 줄 번호의 왼쪽 빈 공간을 클릭하면 파란색 또는 빨간색 표시가 생긴다.
중단점이 선택되면 우측 중단점 패널에 선택한 중단점이 추가된다.
4) 단계별 실행
중단점을 선택하고 우측상단의 일시정지 버튼을 클릭하면 디버깅 제어 버튼이 활성화 된다.
버튼 설명은 왼쪽에서부터 순서대로 다음과 같다.
▶ 스크립트 실행 재개 ( F8 ) 혹은 ( Ctrl + \ )
중단점에 멈춰있던 프로그램을 계속 실행시킨다.
다음 중단점이나 프로그램 종료 시점까지 실행된다.
함수 내부로 들어가거나 세부 단계를 신경쓰지 않기 때문에, 전체 흐름을 빠르게 진행할 때 유용하다.
↷ 다음 함수 호출 ( F10 ) 또는 ( Ctrl + ' )
단위 실행을 클릭 시, 현재 줄을 실행하고 다음 줄로 이동한다.
함수 호출이 있더라도 함수 내부로 들어가지 않고 실행을 건너뛴다.
다음 중단점까지가 아니라 바로 다음 실행 단계로 넘어가는 것이기 때문에 F5 보단 세부적이지만,
실행된 코드안의 세부 함수까지 확인하지 않기 때문에, 함수의 결과 값만 확인하고 싶을 때 유용하다.
⬇ 다음 함수 호출 ( F11 ) 또는 ( Ctrl + ; )
현재 줄의 코드를 실행하고, 호출된 함수 내부로 들어가 세부적으로 디버깅한다.
함수의 동작을 확인하고 싶을 때 사용한다.
⬆ 현재 함수에서 벗어나기 ( Shift + F11 ) 또는 ( Ctrl + Shift + ; )
함수 내부 디버깅 중 현재 함수 실행을 종료하고 호출한 위치로 돌아간다.
함수 내부에서 더 이상 디버깅이 필요 없을 때 사용한다.
➡ 단계 ( F9 )
현재 줄에 중단점을 추가하거나 제거하는 단축키이다.
해당 줄에 중단점이 없으면 중단점을 설정하고, 이미 설정된 중단점이 있으면 해당 중단점을 제거한다.
⏹ 중단점 비활성화 ( Ctrl + F8 )
모든 중단점을 한 번에 활성화하거나 비활성화 하는 기능이다.
중단점은 삭제되지 않고, 비활성화 상태로 전환되는데, 비활성화 된 중단점은 코드 실행을 멈추지 않는다.
여러 개의 중단점을 설정했지만, 특정 디버깅 세션에서 중단점을 사용하지 않으려는 경우나 중단점을 재활성화해야 할 때 사용한다.
5) 상태 확인하기
중단점에서 멈췄을 때, 개발자 도구의 여러 패널을 활용하여 실행 상태를 확인할 수 있다.
➡ 스레드 (Thread)
: 멀티스레드 작업 중 Web Workers 또는 Service Workers의 코드 실행을 멈춘다. 웹 어플리케이션에서 백그라운드로 동작하는 작업의 디버깅에 유용하다.
➡ 감시 (Watch)
: 추적하고 싶은 변수나 표현식을 추가하여 값을 실시간으로 확인할 수 있다.
➡ 중단점 (Breakpoints)
: 중단점이 선택된 코드 혹은 설정된 특정 코드 줄에서 실행을 멈춘다.
➡ 범위 (Variables)
: 현재 함수에서 선언된 변수와 전역 변수를 확인할 수 있다.
객체나 배열을 확장하여 내부 값을 확인 가능하다.
➡ 호출스택 (Call Stack)
: 현재 코드가 실행되기까지의 함수 호출 경로를 보여준다.
특정 호출 스택을 클릭하면 해당 함수로 이동하여 디버깅할 수 있다.
➡ XHR/가져오기 중단점
: 특정 네트워크 요청이 발생하면 실행을 멈춘다. XHR/가져오기 중단점 탭을 클릭 후 우측 플러스 버튼을 클릭하여 URL을 입력하면 조건이 입력된다.
➡ CSP 위반 중단점 ( CSP Violation Breakpoints )
: 웹 페이지의 Content Security Policy(CSP)를 위반하는 요청이 발생할 때 실행을 멈춘다. CSP는 보안 정책으로, 외부스크립트, 스타일, 이미지 등의 로드 허용 여부를 제어한다. 예를 들어, 허용되지 않은 외부 리소를 로드하려는 시도를 추적할 때 사용한다.
➡ DOM 중단점
: 특정 DOM 요소에서 이벤트(변경, 삭제 등)가 발생하면 실행을 멈춘다.
전역 리스너와 달리, 특정 요소에 연결된 이벤트만 중단시킬 수 있다.
특정 요소의 click, hover, keyup 등의 이벤트가 실행되는 시점을 확인하고 싶거나 이벤트의 호출 순서 및 동작을 확인하고 싶을 때 사용된다.
요소탭에서 요소를 우클릭 후, "중단위치(Break on)" → "하위 트리 수정(Subtree Modifications)" 혹은 속성 수정(Attribute Modifications) 선택 후 해당 이벤트가 발생하면 디버깅 모드로 전환된다.
➡ 전역 리스너 (Global Listener)
: 특정 이벤트가 발생할 때 코드 실행을 멈추는데, 이 이벤트는 전역적으로 설정되어 모든 이벤트에 반응한다. 전역 리스너 클릭 시 모든 이벤트 목록이 나열되며, 추적하려는 이벤트를 체크하여 디버깅할 수 있다.
이벤트 리스너 중단점보다 더 광범위하게 전역적으로 등록된 리스터를 추적하는데,
addEventListener 또는 removeEventListener로 바인딩된 이벤트나 전역객체(Window, document)에 바인딩된 이벤트도 추적이 가능하다.
전역에서 등록된 이벤트 리스너(예 : 페이지 전환, 로드 완료 등)가 호출되는 시점을 분석하거나 이벤트가 중복 처리되는 문제를 찾고싶을 때 사용된다.
➡ 이벤트 리스너 중단점 ( Event Listener Breakpoints )
: 특정 이벤트 종류(click, keydown 등)가 발생할 때 중단점을 활성화한다.
이벤트 리스터 중단점을 클릭하면 나오는 목록 중 원하는 이벤트를 선택하여 전역적으로 추적이 가능하다. 어떤 요소가 이벤트를 발생시키는지 추적하고 싶거나, 이벤트 발생 시 실행되는 리스너의 코드를 분석할 때 사용된다.
전역 리스너에서 리스너가 등록되거나 호출되는 위치와 실행 흐름을 추적하는 것과 달리 이벤트 리스너는 발생한 이벤트 종류를 기준으로 어떤 요소가 실행되었는지 확인한다는 중단한다는 차이가 있다.