Chrome 디버거 활용

프로그램을 작성하면 발생할 수 있는 오류 2가지

-Syntax Error (문법적 오류)
해당 구문이 실행되지 않아 쉽게 발견 및 수정 가능
-Semantic Error (논리적 오류)
실행은 되지만 의도한 결과가 도출되지 않는다.

Chrome 디버거 활용

• 크롬 디버거를 활용하면 프로그램이 실행되는 도중 원하는 위치에서 멈추도록 할 수 있다.
• 멈추고 싶은 코드의 라인번호를 클릭해서 추가 가능하다.
  개발자 도구 Sources tab 활용하면 된다.

Breakpoint

프로그램이 실행되는 도중 원하는 위치에서 멈추도록 할 수 있다.
멈추고 싶은 코드의 라인번호를 클릭해서 추가 가능하다.

단계적 실행

• 한번 멈춘 프로그램은 step over(함수의 호출이 있을 때 건너뛴다.),
  step into(함수 호출이 있을 때 해당 함수로 안으로 들어가게 된다.),
  step out(현재 실행중인 함수에서 벗어난다) 버튼을 통해 한단계씩
  프로그램을 실행할 수 있다.
• resume 버튼을 통해 프로그램을 다시 재개한다.
  (진행하다가 breakpoint를 만나면 다시 중지한다.)

Watch 창

조사식을 추가해 각 시점의 변수의 상태에 값을 조회 가능하다.

Scope

실행중인 함수의 scope local영역에서 선언된 정보들을 확인 가능하다.

Console 창

디버깅 중에도 명령을 입력 가능하다.
변수의 값을 수정하거나 확인할 수 있다.

Call stack 창

해당함수가 어떻게 호출 되어 왔는지 확인 가능하다.