VSC 디버거 사용하기

우선 폴더가 여러개 띄워져있는 상태라면

'File - Open Folder' 에서 하나의 프로젝트만 열어준다.

그다음 좌측메뉴에 'Run and Debug' 탭을 클릭한다.

create a launch.json file 을 눌르면 .vscode 폴더아래 launch.json 파일이 생성된다.

1. yarn 을 사용하는 경우

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug NestJS",
            // 워크스페이스 루트 디렉토리를 현재 작업 디렉토리로 지정
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "start:debug"
            ],
            "console": "integratedTerminal",
            "restart": true,
            "port" : 9229,
            "autoAttachChildProcesses": true
        }
    ]
}

2. npm 을 사용하는 경우

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node", // 세팅의 타입
      "request": "launch", // launch 실행하는거, attach 실행되있는거에 붙는거
      "name": "Debug NestJS", // 어떤 이름으로 부를건지
      "runtimeExecutable": "npm", // 어떤걸로 실행 할건지 node, yarn ...
      "runtimeArgs": ["run", "start:debug"], // npm run start:dev 에서 npm이 runtime이고 run start:dev가 Args임
      "console": "integratedTerminal", // intergratedTerminal은 vscode에서 실행하는 터미널임
      "restart": true, // 자동 연결 할건지
      "port": 9229,
      "autoAttachChildProcesses": true // 디버거를 자동으로 process에 붙을지 말지 결정
    }
  ]
}

작성을 완료했으면 저장 후 다시 'Run and Debug' 탭으로 이동하면 위와 같이 활성화된 것을 볼 수 있다.

 

기존 서버가 켜져있으면 끄고, 'Start Debugging' 버튼을 누르거나 'F5'를 누르면 터미널이 디버그 모드로 실행된다.

 

이제 디버깅을 하고싶은 코드에 F9로 Break Point를 걸어주고,

클라이언트에서 요청을 날려보자.

위와 같이 해당 줄에서 멈추며 좌측 디버그창에는 각종 정보들이나 콜스택을 확인할 수 있다.