Chrome 으로 디버깅

디버깅

• 스크립트 내 에러 검출을 제거하는 일련의 과정

• 호스트 환경 대부분에서 개발자 도구 안에 UI 형태로 구비

• Chrome 익숙해지면 다른 것도 익숙해 짐

‘Sources’ 패널

• 개발자 도구 안에 존재

• 세 영역으로 구성

1. 파일 탐색 영역

페이지 구성하는 리소스 트리형 태로 보여줌

1. 코드 에디터 영역

선택한 파일 소스 코드 보여줌. 편집도 가능

1. JS 디버깅 영역

디버깅 관련 기능 제공

콘솔

• 구문 입력하고 실행 시 실행 결과 출력

중단점

• JS 의 실행이 중단되는 코드 내 지점 의미

• 디버깅 영역에서 중단점 이용한 작업들 가능

• 조건부 중단점 : 표현식이 참인 경우에만 실행 중지

debugger 명령어

• 스크립트 내에 적을 시 중단점과 설정한 것과 같은 효과

멈추면 보이는 것들

• 디버깅 영역의 하위 패널들에서 여려 기능 제공

1. watch : 중단점에서 표현식 평가, 결과 보여줌

2. Call Stack : 코드 해당 중단점으로 안내한 실행 경로 역순 표시

3. Scope : 현재 정의된 모든 변수 출력

실행 추적하기

• 디버깅 영역 상단에서 제공

1. Resume : 스크립트 다시 시작

2. Step : 다음 명령어 실행

3. Step over : 함수 안으로 들어가지 않고 다음 명령어 실행

4. step into : 비동기 함수까지 실행

5. step out : 실행 중인 함수의 실행 끝날 떄 까지 실행

6. 모든 중단점 활성화/비활성화

7. 예외 발생 시 코드 자동 중지 활성화/비활성화

• continue to here 옵션 : 중단점 설정하기 귀찮은데 해당 줄 실행 재개 시 사용

console.log

• 원하는 것 콘솔에 출력할 때 사용

• 디버거 없이 무슨 일이 일어날 지 충분히 파악 가능

요약

• 디버깅 : 스크립트 내 에러 검출 제거하는 과정

• ‘source’ 패널 : 디버깅과 관련된 툴 존재

• 콘솔 : 구문 입력하고 실행 시 출력

• 중단점 : JS 실행이 중단되는 코드 내 지점

• 조건부 중단점 : 표현식이 참인 경우에만 실행 중지

• debugger 명령어 : 스크립트 내에 중단점과 같은 효과

• 디버깅 영역 하위 패널에서 중단점 관련 툴 제공

• 실행 추적 : 디버깅 영역 상단에서 제공하며 여러 기능 존재

• console.log : 원하는 것 콘솔에 출력할 때 사용하며 디버거와 적절히 활용 시 디버깅 충분히 가능