February 22, 2022 https://ui.toast.com/weekly-pick/ko_20160527
디버깅 컨트롤
다른 환경의 디버깅 도구와 마찬가지로 크롬 개발자 도구도 코드를 스텝별로 디버깅 하는 기능을 지원한다.
디버깅을 컨트롤 하는 패널에는 스텝을 다룰수 있는 버튼외에 브렉포인트관련 도구와 Async 체크박스가 있다. 해당 버튼들은 다른 환경의 디버깅 도구를 다뤄본 사람이라면 금방 적응할만한 UI를 가지고 있다.
Pause/Continue, F8:
- 첫 번째 버튼은 평소에는 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 된다. 다른 브렉포인트가 잡힐 때까지 코드를 진행시킨다.
Step over, F10:
- 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수안의 코드로는 진입하지 않는다. 즉 라인의 함수를 실행만 하게 된다.
Step into, F11:
- 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있다.
Step out, SHIFT+F11:
- 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아간다.
Toggle breakpoints:
Pause on exception:
- 자바스크립트 예외가 발생하면 해당 위치에 브렉포인트를 잡아준다
Capture async stack trace: