[크롬데브툴] 디버그 자바스크립트

소스 패널 개요 - Chrome 개발자

Sources panel overview - Chrome Developers

디버그 자바 스크립트 - 크롬 개발자 (chrome.com)

Debug JavaScript - Chrome Developers

https://youtu.be/H0XScE08hy8

1. step into  다음 함수 호출로 들어가기

Step into next function call

F11 or Command+;

F11 or Control+;

step into  다음 함수 호출로 들어가기를 누르면

메서드 안으로 들어간다.

확인해보자.

 

 

2. step over  다음 함수 호출로 넘어가기

Step over next function call

F10 or Command+'

F10 or Control+'

step over  다음 함수 호출로 넘어가기

아래로 흐름을 쭉 따라가고 싶을 때 누르면서 값을 읽어내려가면 된다.

 

3. Step out of current function 현재 함수에서 나가기

Step out of current function

Shift+F11 or Command+Shift+;

Shift+F11 or Control+Shift+;

step out을 눌러주면...

 

4. break point + Pause script execution (if currently running) or resume (if currently paused) 스크립트 실행 일시 중지(현재 실행 중인 경우) 또는 다시 시작(현재 일시 중지된 경우)

스크립트 실행 일시 중지(현재 실행 중인 경우) 또는 다시 시작(현재 일시 중지된 경우)

F8 또는 Command+\

F8 또는 Control+\

Pause script execution (if currently running) or resume (if currently paused)

F8 or Command+\

F8 or Control+\

 

 

 

5. 호출스택

 

 

6. watch 조사식

 

같이 참고하면서 본 영상:

https://youtu.be/BfyegHhCh_g