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