하루 기록

[vscode] nodejs 디버깅 셋팅 본문

Today I Learned/in dev

[vscode] nodejs 디버깅 셋팅

떼굴펜 2024. 4. 25. 13:19
알고리즘 문제 풀이 중, console.log 찍는 게 귀찮아졌다.
디버깅... 디버깅이 필요해!

 

 

 

 

1) vscode 좌측 메뉴에서, 실행 및 디버그 버튼 -> node.js 선택

 

 

 

2) launch.json 파일이 켜지면서 자동완성된 파일이 생성된다.

- 표시된 항목 중에서 수정하고 싶은 항목이 있다면 수정

 

 

 

참고) launch.json 파일이 비어있어요

- launch.json 파일 조차 안뜬다면 생성하기

- 우측의 구성 추가 버튼 클릭 -> node.js :프로세스에 연결 node.js 항목 없으면 nodejs 설치가 안된 것은 아닌지 확인

 

 

3) 초록 화살 표, 클릭 시 디버그 콘솔에 console.log 찍히는 모습 볼 수 있다.

 

 

3-1) 그래서 디버깅 어떻게 하는데?

코드라인 앞에 마우스를 올리면 중단점(breakpoint)을 찍을 수 있다.

 

중단점 찍고 다시 초록 화살표 누르면,

빨간 박스처럼 breakpoint 실행 전, 변수의 값을 빨간 박스에서 보거나 해당 변수의 코드에 마우스 hover하면 값이 나온다.

파란 박스 영역의 버튼(+단축키)로 코드 실행 순서를 제어할 수 있다.