[JS 코드 품질 개선] Chrome으로 디버깅하는 법

 

코테 준비와 함께 JS기본기를 탄탄히 하고자 작성.
JS 기본 문법 정리
본 내용은 모두
https://ko.javascript.info/
내용을 참조하여 작성

간단한 작성 계기 : JS는 구글링+JS문법 인강으로 배운 게 전부라 디버깅이 주먹구구식. 제대로 공부하고 숙지하기 위해 글을 작성.

Debugging이란?

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

Source 패널

Source 패널은 크게 세 개의 영역으로 구성

1. 파일 탐색 영역 - 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 전개
2. 코드 에디터 영역 - 리소스 영역에서 선택한 파일의 소스 코드를 출력.
3. 자바스크립트 디버깅 영역 - 디버깅에 관련된 기능을 제공

Console

• 생략

중단점

중단점이란 말 그대로 JS의 실행이 중단되는 코드 내 지점을 의미하며, Source 패널에서 원하는 라인의 번호를 찍어 중단점 설정이 가능하다.

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있으며 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다. -> 디버깅이 가능해짐

Source 패널 우측의 디버깅 영역에서 중단점 목록(Break Points)을 확인할 수 있으며 파일 여러개에 다수의 중단점 설정시, 디버깅 영역을 이용해 아래와 같은 작업이 가능하다.

• 항목을 클릭해 해당 중단점이 설정된 곳으로 바로 이동할 수 있습니다.
• 체크 박스 선택을 해제해 해당 중단점을 비활성화 할 수 있습니다.
• 마우스 오른쪽 버튼을 클릭했을 때 나오는 ‘Remove breakpoint’ 옵션을 통해 중단점을 삭제할 수도 있습니다.
• 이 외에도 다양한 기능이 있습니다.

조건부 중단점
줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 조건부 중단점(conditional breakpoint) 을 설정할 수 있습니다. Add conditional breakpoint를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참인 경우에만 실행을 중지시킬 수 있습니다. 조건부 중단점을 설정하면 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있습니다.

debugger 명령어

• 생략

중단점을 통해 멈추면 관찰할 수 있는 것

1. watch - 표현식을 평가하고 결과 출력
Add Expression 버튼 + 를 클릭해 원하는 표현식 입력 후 Enter시 중단 시점의 값 출력. 입력한 표현식은 실행 과정 중에 계속해서 재평가된다.
2. Call stack - 코드를 해당 중단점으로 안내한 실행경로를 역순으로 표시
3. Scope - 현재 정의된 모든 변수 출력
Local은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역에서 확인 가능.
Global은 함수 바깥에서 정의된 전역 변수

실행 추적하기

실행 단계마다 어떤 일이 일어나는지 추적하기

Resume : 스크립트 실행을 다시 시작함 (단축키 F8)

• 실행을 재개. 추가 중단점이 없는 경우, 실행이 죽 이어지며 디버거는 동작하지 않는다.

 

 

Step : 다음 명령어를 실행함 (단축키 F9)

• 다음 문 실행.

 

 

Step over : 다음 명령어를 실행하되, 함수 안으로 들어가지 않음 (단축키 F10)

• Step과 유사하지만 다음 문이 함수 호출일 때함수 내로 진입하지 않아 함수 호출 시 내부에서 어떤 일이 궁금하지 않을 때 유용.

 

 

Step into : (단축키 F11)

• Step과 유사하며 비동기 함수 호출에서 다르게 동작.
• Step은 setTimeout 같은 비동기 동작은 무시하는 반면, Step into는 비동기 동작을 담당하는 코드로 진입하며, 필요시 비동기 동작이 완료될 때까지 대기.

 

 

Step out : 실행중인 함수의 실행이 끝날 때까지 실행을 계속함 (단축키 shift + F11)

• 현재 실행중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 정지. 탐색할 목적이 아닌 중첩 함수로 진입했거나 가능한 빨리 함수 실행을 끝내고 싶은 경우 유용.

 

 

모든 중단점을 (일시적) 활성화 / 비활성화

 

예외 발생 시 코드를 자동 중지시켜주는 기능 활성화 / 비활성화

• 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춥니다. 실행이 중단되었기 때문에 변수 등을 조사해 어디서 에러가 발생했는지 찾을 수 있게 된다.

Continue to here 옵션
특정 줄에서 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴를 열면 "Continue to here"라는 옵션을 볼 수 있습니다.중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 아주 유용한 옵션입니다.