JavaScript Debugging

• 들어가기 전에 자바스크립트는 실행단계(런타임)에서 버그가 발견됩니다. 그 타이밍에 어디가 문제인지 바로 확인하는 게 좋습니다. 다른 프로그래밍처럼 자바스크립트 개발도 디버깅의 연속이라고 보면 됩니다.

---

학습 목표

1. 크롬브라우저를 통해서 자바스크립트 디버깅 방법을 알아본다.

핵심 개념

• chrome developer tools
• debugging

학습하기

디버깅 컨트롤

• Pause, Continue : 첫 번째 버튼은 평소에 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 됩니다. 다른 브레이크포인트가 잡힐 때까지 코드를 진행합니다.
• Step over next function call : 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수 안의 코드로 진입하지 않습니다. 즉 라인의 함수를 실행만 하게 됩니다.
• Step inot next function call : 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있습니다.
• Step out of current function : 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아갑니다.
• Active / Deactive breakpoint : 브레이크 포인트를 끄거나 켤 수 있습니다.
• Pause on exception : 자바스크립트 예외가 발생하면 해당 위치에 브레이크포인트를 잡아줍니다.

생각해보기

1. 본인이 개발 중 인코드의 디버깅을 지금 배운 내용으로 해봅니다. 디버깅을 통한 개발방법도 일종의 습관입니다.
2. 구글 검색창에 '크롬 개발자 도구 자바스크립트 디버깅'을 입력해서 학습해보세요.