[2019.02.22] 크롬으로 디버깅하는 방법

역시..아무리 Pre코스라도 배울만한 내용이 많다. 크롬으로 디버깅을 돌리는 방식을 상세하게 공부할 수 있었다. 지금껏 나는 크롬 개발자 도구를 쓴다면, 자바스크립트에서 에러가 난 부분을 확인하는 용도로만 사용을 했었는데, 그보다 더 좋은 기능이 참 많았다.

우선 개발자 도구를 켜는 단축키는 'option + command + i' 이다.

# 크롬 개발자 도구를 켠 모습

개발자 도구에서 Source 탭을 누른다. 맨 왼쪽 창은 현재 읽히고 있는 모든 파일, 중간부분이 소스코드, 맨 오른쪽이 디버깅 제어 기능이란다.

# 디버깅을 돌리는 화면

맨 오른쪽 창에서 어떤 이벤트를 발생했을 때 디버깅을 실행할 건지 나열이 되어있다. 키보드, 마우스, 터치, control 등등... 내용이 많아서 시간 날 때 한번 봐바야겠다. 

만약 마우스를 클릭했을 때 디버깅을 돌릴 시, Mouse - Click 을 클릭하고, 실제 브라우저 화면에서 클릭 이벤트를 발생시키면, 해당 관련된 함수들이 디버깅 돌아가듯이 한 단계씩 멈추면서 돌아가고, 해당 변수들 내용도 확인할 수 있다.브레이크 포인트 찍는거도 똑같다.

사진의 오른쪽 상단처럼 해당 변수 내의 값들을 전부 보여준다. 이렇게 편리한 기능들이 있었다....ㅜㅜ

• 디버깅 한단계씩 돌리는 단축키 : F10 또는 command + '
• 디버깅 다음 브레이크포인트까지 돌리는 단축키 : F8 또는 command + \