Visual Studio Code를 이용한 Vue.js 앱 디버깅하기

이 글은 Vue CLI 3 버전을 기준으로 설명합니다.
Vue CLI 2를 사용하시는 경우 아래 명령어로 Vue CLI 3버전을 설치하세요

Vue CLI로 프로젝트를 만든 후 Visual Studio Code(이하 vscode)에서 프로젝트를 엽니다.

App.vue 파일 수정

디버깅해야할 부분은 변수 a, b 그리고 상수 result가 정상적인 값인지 확인하는 것 입니다.
물론 debugger를 사용하여 크롬 브라우저의 개발자 도구를 이용할 수도 있습니다.
더 간단하게는 console.log를 이용할 수 도 있습니다.

vscode의 디버거 기능을 이용하면 DEBUG CONSOLE과 디버거 사이드바에서 해당 시점의 변수/상수 값을 볼 수 있습니다.

vscode 디버거 셋팅

Vue CLI 3버전은 대부분의 설정들을 숨기고 새로 파일을 만들거나 package.json에 설정을 넣는 방법을 유도합니다. 프로젝트 루트에 vue.config.js파일을 만들어 Webpack 설정을 합니다.

이제 vscode 디버거 태스크를 추가합니다.

좌측 상단의 DEBUG에 [Debug] Vue.js: chrome 태스크가 추가되었습니다.

터미널에서 npm run serve 명령어로 앱을 개발 모드로 실행하고, vscode DEBUG도 함께 켭니다.

vscode의 DEBUG CONSOLE에는 브라우저의 콘솔 메시지와 동일한 내용이 출력됩니다.

vscode의 코드 에디터에 브레이크포인트를 지정해주고, vscode 디버거 컨트롤의 새로고침을 누르면 적용됩니다.

여기서는 sum 메소드가 실행되면 (즉, 버튼을 누르면) 브라우저를 보고 있더라도 vscode가 활성화되고, 해당 시점의 내용을 볼 수 있도록 만들어줍니다.