파트 1 - 2) 코드 품질 - 1) Chrome으로 디버깅하기

크롬으로 디버깅하기 링크 : https://ko.javascript.info/debugging-chrome

중단점

1) 크롬 데브툴 좌측의 번호(줄번호)를 클릭하면 그 줄이 중단점이 된다.
중단점은 말 그대로 자바스크립트가 실행되다가 멈추는 지점을 말한다. 이 중단점을 통해 디버깅 영역의 중단점에서 변수가 어떤 값을 갖고 있는지 알 수 있고 중단점을 기준으로 명령어를 실행할 수도 있다.

조건부 중단점 : 줄번호를 마우스 오른쪽으로 클릭하면 '조건부 중단점'을 설정할 수 있다.
'Edit break point' 라는 버튼을 클릭하면 뜨는 작은 창에 표현식을 입력하면 표현식이 참인 경우에만 실행을 중지시킬 수 있다. => 변수에 특정값이 할당 되거나 매개변수로 특정값이 들어올 때 중지시키는 등 디버깅에 유용하다.

2) script내에 debugger; 명령어를 두면 중단점을 설정한 것과 같은 기능을 한다.

sources 탭의 디버깅툴이 보여주는 것들

1. watch : 입력한 표현식을 평가하고 결과를 보여준다.

2. call stack : 코드가 실행되어 중단점에 이르기 까지의 과정을 역순으로 보여준다.
   예를들어 index.html에서 다른 js파일에 정의된 b함수를 호출했으면 b호출이 상단에, 하단에는 index.html(b함수가 정이 되지 않은 파일)이 anonymous로 올라와있다. index.html이 먼저 call stack에 오르고 그 다음에 호출된 b 함수가 call stack에 쌓인 것.

3. scope: 현재 정의된 모든 변수 출력.
   local: 함수의 지역 변수,
   global: 전역변수,
   this 자기 자신을 의미한다.

디버깅툴의 기능 사용

크롬 데브툴의 Sources 탭을 클릭하면 위 사진에서 네모칸이 쳐진 버튼들의 기능을 이용할 수 있다. 위 버튼들의 왼쪽부터 오른쪽으로 단축키 기재와 함께 기능 설명을 한다.

1. Resume (단축키 : F8) : 스크립트 다시 실행

2. Step Over (F10) : 다음 명령어를 실행하되, 함수 안으로 들어가진 않음. 함수만 호출 하고 함수 내부는 궁금하지 않을 때 유용.

3. Step into (F11) : 비동기 코드로 진입, 동작이 완료될 때까지 대기.

4. Step out (shift + F11) : 함수 실행이 끝날 때까지 실행하여 함수 읽는 것을 끝내고 싶을 때 유용하다.

5. Step : 다음 명령어 실행 (F9)

6. 모든 중단점을 일시적으로 활성/비활성화

7. 예외 발생시 자동 중지. 기본적으로 활성화 되어있다.

이 디버깅툴 외에도 우리가 주로 사용하는 방법이기도한 console.log를 찍어보는 방법이 있다.