자바스크립트 디버깅

디버깅 과정을 알아보기위해 todomvc.com에서 Vanilla JS 페이지로 들어가보았다.

어떤 프레임워크 없이 진행될 수 있는 것을 보통 바닐라 JS라고 부른다.

이렇게 개발자도구를 열어서 Sources 부분에서 원하는 곳에 브레이크 포인트를 걸 수 있다

위에서 보면 96번째 줄을 눌렀더니 저렇게 표시가 돼 있는것을 볼 수 있다.

이 상태에서 새로운 검색어를 입력하여 처리해보겠다.

위에서 볼 수 있는것과 같이 paused in debugger과 함께 브레이크 포인트까지 실행이 된다.

이 상태에서 ESC를 누르면 밑에서 Console창이 올라오고

여기에 궁금한 항목들을 검색하면 결과가 나오는 것을 볼 수 있다.

어디서 호출했는지 궁금할 때는 우측에있는 Call Stack을 통해 알 수 있다.

우측 밑에보면 Scope 항목도 있는데 Scope항목에서는 변수들을 확인할 수 있다.

예를들어 그림의 Scope 밑의 Local항목은 지역변수를 의미한다.

또한 오른쪽 위의 여러가지 화살표 모양을 통해 한 step씩 진행할 수도 있고 함수안에 들어가서

진행상황을 모두 체크할 수도 있다.

출처 : edwith

https://www.edwith.org/boostcourse-web/lecture/20391/