JavaScript Debugging

• 들어가기 전에

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

• 학습 목표

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

• 핵심 개념

- chrome developer tools

- debugging

• 디버깅 컨트롤

* Vanilla.js : 어떤 프레임워크 없이 실행될 수 있는 것..

- Pause, Continue : 첫번째 버튼은 평소에는 Pause 버튼 상태인데, 브레이크 포인트가 잡힌 상태에서는 Continue 버튼이 된다. 다른 브레이크 포인트가 잡힐 때 까지 코드를 진행한다.

- Step over next function call : 스텝 오버는 코드 라인을 한 스텝 진행하는 데, 현재 실행 라인에 함수 실행 코드가 있다면 함수가 실행되는데 이 때 함수 안의 코드로는 진입하지 않는다. 즉, 라인의 함수를 실행만 하게 된다.

- Step into next function call : 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있다.

- Step out of current function : 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 들어간다.

- Active/Deactive breakpoint : 브레이크 포인트를 끄거나 켤 수 있다.

- Pause on exception : 자바스크립트 예외가 발생하면 해당 위치에 브레이크 포인트를 잡아준다.