크롬 개발자도구에서 디버깅하는 방법 (debugger)

 

나는 원래 개발자도구의 디버거 기능을 사용하지 않고 다른 디버깅 툴을 사용했었다.

https://pythontutor.com/live.html#mode=edit

Live Programming Mode - Python Tutor - Visualize Python and JavaScript code

 

 

 

 

 

실행과정이 직관적으로 잘 보이는 모습에 애용했었는데, 오늘 어떤 코드를 넣었더니 INFINITE LOOP 이라는 에러가 뜨면서 실행조차 안되는 모습을 보였다. 이외에도 가끔 사이트 자체가 먹통일 때도 있어서, 개발자 도구로도 실행과정을 하나하나 볼 수 있는 방법을 찾아보게 되었다.

 

 

 

[코드] debugger 명령어로 중단점을 만들어 함수 호출부터 F9키를 눌러 하나하나 실행해 볼 수 있었다.

 

 

 

debugger

내가 코드를 직접 실행해보고 싶은 부분에 debugger 명령어를 적어주면, 그 부분이 중단점이 되어 멈춘 상태로 하나하나 돌려볼 수 있게 된다. 이 상태에서 어떤 키를 누르냐에 따라 실행을 달리 할 수 있다. 쓸 수 있는 단축키들은 다음과 같다.

 

 

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

실행을 재개한다. 추가 중단점이 없는 경우 실행이 쭉 이어진다.

 

단축키 F9 (Step) - 다음 명령어 실행.

다음 문을 실행한다. Step 버튼을 누르면 스크립트 전체를 문 단위로 하나하나 실행할 수 있다.

 

단축키 F10 (Step Over) - 다음 명령어를 실행하되, 함수 안으로 들어가진 않음.

Step(F9) 와 유사하지만, 다음 문이 함수 호출일 때, Step 과는 다르게 동작한다. Step Over는 보이지 않는 곳에서 중첩함수를 실행하긴 하지만 함수 내로 진입하지는 않는다. 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용하다.

 

단축키 F11 (Step Into) - 다음 명령어를 실행하되, 비동기 동작을 무시하지 않음.

Step(F9) 와 유사하지만, 다음 문이 비동기 함수 호출일 때, Step 과는 다르게 동작한다. Step은 setTimeout 같은 비동기 동작은 무시한다. 반면 Step Into 는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다.
(자세한 내용: 개발자 도구 매뉴얼)

 

단축키 Shift+F11 (Step Out) - 실행중인 함수의 실행이 끝날 때까지 실행을 계속함.

현재 실행중인 함수의 실행을 계속 이어나가다가 마지막 줄에서 실행을 멈춘다. 내부동작을 알고 싶지 않은 중첩함수로 진입했거나 가능한 빨리 함수 실행을 끝내고 싶은 경우에 유용하다.

 

 

 

이외에도 Chrome에서 디버깅하는 방법을 더 자세하게 알고 싶다면 아래의 링크로 들어가서 확인해보자!

 

 

출처 : 모던 JavaScript 튜토리얼 블로그

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

Chrome으로 디버깅하기