Modern Javascript / 코드 품질 - Chrome으로 디버깅

Chrome으로 디버깅하기

디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다.

모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓는다.

디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있다.

줄 번호를 클릭하면 중단점을 설정할 수 있다.

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다.

또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.

function hello(name) {
    let phrase = `Hello, ${name}!`;
    
    debugger; // 여기서 실행이 멈춘다
    
    say(phrase);
}

debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열고 소스 코드 영역을 띄워 중단점을 설정하는 수고를 하지

않아도 된다. 에디터를 떠나지 않고도 중단점을 설정할 수 있기 때문에 편리하다.

중단점이 제대로 설정되어있는지 확인하고,새로 고침 단축키를 눌러 중단점을 작동시켜보자.

Watch - 표현식을 평가하고 결과를 보여준다.
add Expression 버튼 + 를 클릭해 원하는 표현식을 입력한 후 enter를 누르면 중단 시점의 값을 보여준다.
입력한 표현식은 실행 과정 중에 계속해서 재평가된다.
Call Stack - 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다.
Scope - 현재 정의된 모든 변수를 출력한다.