[모던 JavaScript] 3.1 Chrome으로 디버깅하기

디버깅

- 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미함

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

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

 

 

 

'Source' 패널

- 개발자 도구(Cmd + Opt + I)를 열기

- Sources 탭을 클릭해 Sources 패널을 열기

- Sources 패널은 크게 세 개의 영역으로 구성됨

1. 파일 탐색 영역 - 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여줌

2. 코드 에디터 영역 - 리소스 영역에서 선택한 ㅏㅍ일의 소스 코드를 보여줌

3. 자바스크립트 디버깅 영역 - 디버깅에 관련된 기능을 제공함

 

 

 

콘솔

- Esc를 누르면 개발자 도구 하단부에 콘솔 창이 열림

- 여기 명령어를 입력하고 Enter를 누르면 입력한 명령어가 실행됨

 

 

 

중단점(breakpoint)

- 소스 코드를 띄우고 나서 코드 좌측의 줄 번호를 클릭하면 중단점을 설정할 수 있음

 

 

 

debugger 명령어

- 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 봄

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

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 여기서 실행이 멈춥니다.

  say(phrase);
}

 

 

 

추후에 더 자세히 공부하기 위해서

https://ko.javascript.info/debugging-chrome