[Javascript] Nodejs로 디버깅하기: inspect

#Javascript

[원본 링크]

이전에는 nodejs가 디버깅도구를 따로 제공하진 않아서, 노드에서 디버깅을 한다고 하면 보통 콘솔로 값을 찍어보는 게 다였다.

물론 로그 찍는것도 아주 간편하고 좋은 방법이지만, 그것만으로는 부족할 때가 있다.
로그 소스 썼다가 지우는 것도 일이라면 일이고...

한번 사용해보자.
일단 테스트할 프로그램을 실행해야 한다.

node 호출시에 --inspect만 옵션으로 주면 된다. 이 옵션은 nodemon 등을 사용할 때도 동일하게 줄 수 있다.
그럼 아래와 같이 디버그 모드로 실행돼서, 크롬 브라우저에서 접근이 가능해질 것이다.

크롬으로 디버깅하기

그리고 크롬에서 아래 링크로 접속해서
chrome://inspect/#devices

리모트 타겟 목록에서 방금 띄운 디버그 서버로 들어간다.

그럼 이렇게 디버그창이 뜰 것인데

실행될때마다 실시간으로 로그를 공유하게 된다.

저기서 콘솔 로그창에 뜨는 오른쪽의 소스명을 클릭하면

해당 서버 소스로 들어갈 수 있다.

아니면 Add Folder to workspace에서 직접 경로를 지정해서 프로젝트 폴더를 열 수도 있다.

다시 소스로 돌아가보면

해당 소스는 그냥 구구단 출력하는 간단한 소스다.
리스폰스값은 의미없고.
저기서 만약 1단, 2단마다의 변수값들, 상황을 모니터링하고 싶다면 어떻게 해야할까?

중단점

여기서 중단점(breakpoint)이란 기능을 활용해볼 수 있다.
중단점은 다른 디버거들도 다 공유하는 개념인데, 딱 멈출 지점을 정해놓고 항상 그 부분에서 소스 실행이 멈추도록 하는 것이다.
소스 실행중에 중단점에 도달하면 자동으로 멈춰서 해당 상황에서의 값 등을 전부 천천히 확인할 수 있고,
또 도달하면 멈춰서 보고... 그런 기능이다.

중단점은 저기 브라우저 소스에서 라인 숫자를 클릭하면 지정된다.

저러고 다시 저 코드가 실행되도록 유도하면