크롬 javascript 디버깅하는 방법 – Source편

Source탭에서는 디버거(버그잡는) 기능을 제공한다.

디버깅에서 브레이크 포인트를 설정하는 이유는 그 시점에서 어떤 값이 셋팅 되는지 확인하고 소스의 동작 방식 대해 이해하기 위해서 입니다. 변수에 마우스를 가져가면 동작 시점에서 할당된 변수의 값을 볼 수 있고, 좀 더 상세한 흐름을 알기 위해 브레이크 포인트를 걸고 단계별로 진행하며 소스 실행 순서 등을 추적해 볼 수도 있습니다.

1번째 버튼 : break point를 무시하고 실행한다. (다음 break point가 나타날때 까지 실행한다 라는 의미도 된다. 한 단계씩이 아닌 바로 다음 단계로 빠르게 이동하기 위해서 사용한다.)

2번째 버튼 : break point 에서부터 한줄 한줄 디버깅을 실행한다.

3번째 버튼 : into로인해 함수안으로 들어가서 해당 로직을 실행해본다는 뜻

4번쨰 버튼 : 함수를 빠져나가는 것

 

 

위에서 변수에 마우스를 오버하면 값을 확인해 볼 수 있다고 하였는데, 매번 확인하기 귀찮다면 변수를 Scope에 등록해 놓고 확인해 볼 수도 있습니다.

Scope 탭에서 변수를 추가하면 변수들의 값이 할당되어지는 것을 실시간으로 확인 가능하며,

Scope > Global 변수의 값도 확인 가능합니다.

Watch 탭에서 +버튼으로 변수이름을 입력하여 넣으면 디버깅 하는 과정에서 해당 변수가 어떤 값을 갖고 있는지를 계속해서 관찰할 수 있는 것입니다.

DOM Breakpints에서는 해당 breakpoint 값의 속성 값이 변할 때의 소스를 추적해줍니다.

XHR Breakpoint는 ajax 통신을 할 때 특정 url값에 의한 브레이크 포인트가 실행되는 것이며,

Event Listener Breakpoints는 모든 자바스크립트의 이벤트들 중 선택된 이벤트가 실행될 때를 추적해 디버깅 하는 것입니다.

PS ) 소스가 아래 사진처럼  한줄로 나와서 디버깅에 불편해요. 이럴땐 어떻게 하나요?

소스가 이렇게 나오는 이유는 minify 한것이기 떄문. (최소화시켜놨다)

전송하기 좋은 형태로 압축한 것을 의미하며, 공백 들여쓰기 등을 없앤 것입니다.

 

따라서 디버깅이 어렵고, 그래서 크롬에서는 다음과 같은 기능을 제공한다.

 

다음과 같이 하단에 {} 버튼을 클릭하면, 아래사진처럼 소스를 보기 좋게 바꿔줍니다.

minify된 소스가 재 정렬 되어집니다.