sources 탭에서는 다음과 같은 것들을 할 수 있다.
하나씩 알아보도록 하자
중단점 (Breakpoint): 중단점(breakpoint)은 말 그대로 자바스크립트의 실행이 중단되는 코드 내 지점을 의미한다. 중단점을 설정하여 코드 실행을 중지시킬 수 있다. 이를 통해 코드의 특정 지점에서 변수 값을 검사하거나 실행 흐름을 따를 수 있다. (Add conditional breakpoint를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참인 경우에만 실행을 중지시킬 수 있다.) 중단점을 설정하고 새로고침(cmd + R)을 하면 디버거가 실행 됨
워치 표현식 (Watch Expressions), 로컬 변수 (Local Variables), 콜 스택 (Call Stack)
로컬 변수 (Local Variables): 중단점에서 현재 범위(함수 또는 블록) 내의 로컬 변수의 값을 확인할 수 있다.
Scope – 현재 정의된 모든 변수를 출력한다.
Local은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있다.
Global은 함수 바깥에 정의된 전역 변수를 보여준다.
Local 하위 항목으로 this에 대한 정보도 출력된다.
콜 스택 (Call Stack): 현재 실행 중인 함수의 호출 스택을 확인할 수 있으며, 호출 스택을 통해 코드의 호출 경로를 추적할 수 있다.
Call Stack – 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다.
실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈췄다. 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치한다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력된다.
콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 휙 움직이고, 변수 역시 재평가된다. 'anonymous’를 클릭해 직접 확인해 보자!
워치 표현식 (Watch Expressions): 디버깅 중에 특정 변수나 표현식을 모니터링할 수 있으며, 해당 표현식의 값이 변할 때마다 확인할 수 있다.
Watch – 표현식을 평가하고 결과를 보여준다.
Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다. 입력한 표현식은 실행 과정 중에 계속해서 재평가된다.
‘Step over’: 다음 명령어를 실행하되, 함수 안으로 들어가진 않음 (단축키 F10)
‘Step into’: 'Step’은 setTimeout(함수 호출 스케줄링에 쓰이는 내장 메서드)같은 비동기 동작은 무시합니다. 반면 'Step into’는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기 (단축키 F11)
‘Step out’: 실행 중인 함수의 실행이 끝날 때 까지 실행을 계속함 (단축키 Shift+F11)**
console.log**와 같은 함수를 사용하여 메시지를 표시하고, 런타임에 메시지를 확인할 수 있다.