[VSCode] NodeJS, Vue등 javascript 기반 프로젝트 간단하게 디버깅 모드 실행하기

VSCode 에서 간단하게 디버깅하는 방법이다. Windows에서 테스트했다. VSCode에 한글 확장을 설치하지 않았으므로, 설명의 메뉴나 스크린샷은 모두 영어로 나온다.

 

1. Chrome 설치 (크로미움 엣지가 없을 경우)

크롬 기반의 브라우저로 디버깅이 되는 것 같다. 엣지만 설치된 환경에선 실패했다. lanuch.json 파일을 만들어서 적용한다면 가능할 수 있지만 "간단하게"가 주목적이므로 설정작업에 손 안대는 방법으로 진행하겠다. (님크없?)

2. 디버깅할 javacript 기반 프로젝트 열기

디버깅할 프로젝트 폴더를 VSCode로 연다.

3. javaScript Debug Terminal 실행

옆 메뉴란에 [Run] -> [javascript Debug Terminal] 을 선택하거나, VSCode의 터미널 창을 연 뒤, "Create Javascript Debug Terminal" 을 선택한다.

4. 터미널 창에 실행 명령어 입력

생성된 Debug Terminal 창에 프로젝트에 대한 실행명령어를 입력한 뒤 실행한다. 예를 들어, Vue는 기본적으로 "npm run serve"를 입력하면 개발모드로 프로젝트결과물이 실행된다.

 

이것으로 끝났다. breakpoint를 건 뒤, 동작여부를 확인해보자.

 

React 프로젝트에서 breakpoint가 잡힌 모습

Vue 프로젝트에서 breakpoint가 잡힌 모습

기본 nodeJS 프로젝트에서 breakpoint가 잡힌 모습

 

npx create-react-app을 통해 생성한 react 프로젝트는 terminal을 이용한 디버깅이 잡히지 않았다. Debug URL이나 config를 설정해서 debuging 해야한다.