vscode에서 node.js 디버깅 방법

vscode에서 node.js를 visual studio 에서 처럼 디버깅 하고 싶다면....

일단 아래와 같이 간단한 node.js 코드를 작성 해봅니다.

위에 사진과 같이 4번째 줄에 브레이크 포인트를 걸어두고 F5를 누르면 디버그 모드 해서 실행이 됩니다.

(node.js를 디버깅하니 뭐 기타등등 세팅은 기본되어있다고 치고..)

그럼 vscode에서 자동으로 launch.json 파일이 .vscode 폴더에 생성이 됩니다.

파일 내용은 아래 스샷 참조

기본 lanch로 실행하는건 visual studio 에서 디버깅 하는거랑 동일하다.

자동으로 node 실행 하고 디버그 상태가 되는.. 아래 스샷 처럼 브레이크 포인트에 걸린다.

그런데 node.js는 javaScript를 바꾸다보면 위와 같이 디버깅하는게 귀찮다.

그래서 보통 스크립트 파일이 변경되면 자동으로 재시작 해주는 어플리케이션을

이용 하고 로그를 보고 주로 수정한다. (이때 이용하는데 nodemon 어플이다.)

그런데 가끔 브레이크 포인트 걸어서 내용을 보고 싶을 때가 있는데

visual studio 디버깅 기능중에 프로세서 연결해서 디버깅 하듯이 vscode에서도 할수가 있었습니다.

일단 launch.json 에 구성 추가를 해야 합니다.

디버그에 설정을 선택하는 메뉴 에서 구성 추가를 하거나

launch.json파일을 열어서 구성추가 버튼을 누르면 됩니다.

일단 구성추가를 하게 되면 위 사진과 같이 메뉴가 나오는데

여기서 프로세서에 연결 을 선택 합니다

그럼 아래와 같이 launch.json에 코드가 추가되며

디버그 구성 선택 메뉴에도 추가 됩니니다.

추가된 구성에 name 부분은 Attach by Process ID 라고 표시되는데

한글로 나오는게 편해서 바꿔서 저장하였음다.

일단 여기까지 하면 프로세서 연결 디버깅 할수 있는 환경은 끝난 상태임다.

그럼 nodemon을 이용해서 일단 어플을 실행 합니다.

vscode에서는 콘솔창을 열수 있는데 아마 단축키가 ctrl+` 입니다.

그럼 vscode에 내장된 콘솔창을 이용해 아래와 같이 nodemon을 실행 합니다.

이상태에서는 에러가 나거나 console.log() 출력이 콘솔창에서 보이게 됩니다

여기서 우리가 하고 싶은것을 현재 실행된 상태에서 프로세서 연결해서 브레이크 포인트로 디버깅을

할려고 하는거니 일단 디버그에서 위에 세팅했던 프로세서 연결 구성을 선택하고 디버깅(F5)을 시작 합니다.

그럼 아래와 같이 프로세서 선택 화면이 나옵니다.

그럼 맨 첫번째 있는 node .\main.js를 선택 하면 브레이크 포인트 부분에서 디버깅 할수 있게 됩니다.

참고로 nodemon으로 실행시에는 javascript가 변경되면 자동으로 재실행 하기에 프로세서ID가 변경되게 되니

이때는 다시 프로세서 연결해서 디버깅 해야합니다.

아무튼 이것으로 대충 디버깅 설명을 마침니다.