VSC에서 디버깅 하는 법

디버깅을 통해 코드를 이해하는 경우가 많다.

항상 브라우저의 개발자도구에서 debugger를 사용하여 디버깅을 했었다. 간단한 알고리즘이나 코드를 분석하기는 좋았지만, 프로젝트를 진행하면서 파일에 대한 디버깅을 하기에는 브라우저로 한계가 있었다.

vsc를 사용하면서 디버깅 아이콘을 항상 보았지만, 이번기회에 사용하는 법을 알아보았다.

vsc에서 디버깅 하는법

1. .vscode폴더를 만든다.
2. 폴더안에 launch.json파일을 만든다.
3. 파일을 생성하면 오른쪽 하단에 Add Configuration버튼을 클릭한다.
4. Launch via npm을 선택한다.
5. package.json의 script에 debug 명령어를 만들고, 해당파일 경로를 설정한다.
6. vsc debug아이콘을 누르면 Launch via NPM이 활성화 되어있다.
7. 이제 브레이크 포인트를 지정하고, Launch via NPM을 클릭하면 디버깅된다.