함수 디버깅 방법

알고리즘 문제 풀때 내가 작성한 코드가 실제로 어떻게 작동하는지 한줄 한줄 볼수 있는 방법입니다.
수업 시간에 엔지니어분께서 한번 언급 하신적이 있어서 이미 사용하고 계신 분들도 있겠지만 저는 제대로 쓰는 방법을 모르다가 최근에야 알게 되어서 도움이 될까 공유해봅니다.

1. 먼저 함수 첫줄에 debugger; 라고 작성합니다. (혹은 자신이 원하는 위치)

function func1(num) { debugger; // 함수 내용... }

1. 크롬 콘솔을 열고 함수를 복사해서 넣은 뒤 enter 를 칩니다.
2. 함수를 실행시킵니다. 예) func1(4) 입력
3. 내가 enter 를 누르는 동시에 sources 탭이 자동으로 열립니다.
4. 이런 아이콘 목록을 볼 수 있는데

차례대로 설명드리면

 함수 전체 실행(따로 설정한 breakpoint 가 없다면 디버깅이 종료됨)

 (함수 내에 함수가 있을 때) 그 함수안으로 들어가지 않고 다음 줄을 실행

 (함수 내에 함수가 있을 때) 그 함수안으로 들어감

 (함수 내에 함수가 있을 때) 그 함수 밖으로 나옴 (가장 바깥 함수라면 디버깅 종료)

 코드 한 줄 실행 (단축키 f9, 맥은 fn + f9)

f9 는 함수 내의 함수 포함 모든 코드를 한줄씩 진행하는 기능입니다. f9를 통해 함수 코드를 한줄 한줄 실행해보면 아래 사진처럼 크롬이 알아서 각 변수의 값을 실시간으로 보여줍니다. 변수가 어떻게 변하는지 볼 수 있어 잘못된 부분이 있다면 어디가 잘못되고 있는지 확인할 수 있습니다.

(반복문의 i 값도 볼 수 있습니다.)

이외 더 자세히 알고자 하신다면 크롬 디버깅 공식 안내 문서에 자세히 안내되어 있습니다.

도움 되셨길 바랍니다. 감사합니다!