자바스크립트 크롬 개발자도구를 이용한 디버그 방법 정리

자바에서는 디버그 모드를 이용한 디버깅이 가능하지만

자바스크립트를 사용할 경우에는 그게 안되는데

코드를 작성하다가 에러가 발생할 경우

디버그가 없으면 에러 찾기가 매우 힘들다

 

하지만 다행히도 자바스크립트 코드 안에

debugger;

를 넣어주면

해당 위치에서부터 디버그가 가능한데

 

debugger를 넣고 실행 페이지로 이동한 후

F12를 눌러 개발자도구로 이동하고

F5를 눌러 새로고침을 누르면

 

자바스크립트가 다시 수행되게 되는데

처음에는 개발자도구를 열지 않았으므로

디버거에 걸리지 않고

F12를 눌러 개발자도구를 연 뒤에

다시 코드를 수행해 디버거에서 걸리는 식이 되겠다

 

크롬에서 개발자도구를 연 상황인데

디버거에 걸려서 코드 수행이 중단되었고

우측의 버튼을 이용해 디버깅을 진행할 수 있다

 

주로 사용하는 네 버튼을 알아보자면

 

Resume script execution

모든 코드를 수행시키고 디버그 종료

Step over next function call 

코드 한줄 수행, 함수(function)를 만날 경우에는

함수는 수행하나 함수 안으로 들어가지 않음

Step into next function call

코드 한줄 수행, 함수를 만날 경우에는

해당 함수 안으로 들어가 수행 과정을 보여줌

Step out of current function

현재 함수에서 빠져나오기