vscode debugging 셋팅 방법

2022. 5. 5.· 약 3분

intellij만 사용하다가, vscode사용하니까 테스트를 실행하고 디버깅하는데 시간이 너무 많이 소요됨. vscode는 디버깅을 하기위해서 약간의 셋팅이 필요하다.

sample 프로젝트를 만든다.

nestjs node기반으로 하나 만든다.

npm i -g @nestjs/cli
nest new nesjs-sample

1.launch.json파일로 Launch Program 만들기

vscode 좌측 패널에서 Run And Debug 메뉴를 클릭한다.

create a lauch.json file 를 클릭한다.

• 환경을 chrome, node.. 등등 자신의 환경에 맞게 셋팅한다. (필자는 Node.js 를 선택함)
• .vscode하위폴더에 launch.json 파일이 만들어졌다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/app.controller.spec.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

• `“program”: ”${workspaceFolder}/src/app.controller.spec.ts”, 이 부분이 자신이 실행할 프로그램을 지정한다.

참고로 launch.json 파일은 .vscode 하위 폴더에 위치한다. .gitignore 포함되어 있기 때문에 실제 운영중인 소스에 영향을 끼치지 않기 때문에 편하게 사용할 수 있다.

2. Run script로 추가하기

• Run and Debug 왼쪽 메뉴에서, 제일 상단에 있는 Select를 클릭
• Node.js… 를 클릭

package.json에 설정되어 있는 스크립트들이 나온다. 이중에서 자신이 실행할 스크립트를 지정한다.

디버깅하는 방법

1. 원하는 부분에 브레이킹 포인트를 찍는다. 마우스 클릭해도 되고 F9를 눌러도 된다.
2. F5를 눌러서 디버깅프로그램을 시작한다.
3. 해당 위치에서 코드가 멈춘다.
4. 다음 코드라인 진행을 원하면 F8(Step Over)
5. 해당 메서드의 깊이 들어가고 싶으면 F7(Step into)
6. 그냥 진행하려면 ⌘ + ⌥ + R을 클릭한다.
7. 실행을 종료하려면 shift + F5(Disconnect)로 종료한다.

Ref

• https://extbrain.tistory.com/128