크롬 개발자 도구 디버깅

개발자 도구에서는 CSS변경, 페이지 로드 성능 확인, 네트워크 요청 모니터링과 같은 작업을 위한 도구를 제공합니다.
Source패널은 자바스크립트 디버그를 하는 곳입니다.
Source패널 UI는 크게 3부분으로 나뉩니다.

1. File Navigator. 해당 페이지가 요청하는 모든 파일이 나타납니다.
2. Code Editor. File Navigator창에서 파일을 선택한 후, 해당 파일의 콘텐츠가 표시됩니다.
3. JavaScript Debugging. 페이지의 자바스크립트를 검사하는 도구입니다.

디버깅 예시

데모사이트

위 데모사이트에서 Number1과 Number2의 합이 이상하게 나타나는 버그를 확인해보도록 하겠습니다.

변수값 확인

Scope
예시처럼 32번 라인을 클릭하면 중단점이 추가되며 파란색으로 바뀝니다.
이제 개발자도구는 이 코드 줄을 실행하기 전에 항상 일시중지합니다.
코드가 일시중지되면 Scope창이 현재 정의된 로컬과 전역 변수가 무엇인지 표시됩니다.

Watch
Watch 탭을 이용하면 시간에 따른 변수 값을 모니터링 할 수 있습니다.
+버튼(Add watch Expression)을 누르고 typeof sum을 입력합니다.
sum은 숫자여야하지만 문자열로 평가되고 있었습니다. 이렇게 버그의 원인을 확인할 수 있습니다.

실행추적

1. Resume: 스크립트 실행 다시 시작(단축키 F8)
2. Step over: 다음 명령어를 실행하되, 함수 안으로 들어가진 않음(단축키 F10)
3. Step into: Step과 유사하지만 Step은 비동기 동작은 무시하지만 Step into는 비동기 동작을 담당하는 코드로 진입하고 완료때까지 대기(단축키 F11)
4. Step out: 실행 중인 함수의 실행이 끝날때까지 실행을 계속함(단축키 Shift + F11)
5. Step: 다음 명령어를 실행합니다(단축키 F9)
6. 모든 중단점을 활성화/비활성화
7. 예외 발생시 코드를 자동 중지시켜주는 기능 활성화/비활성화