vscode launch.json

vscode를 할 때 js파일을 바로 디버깅을 해보고 싶을 때가 있다. 알고리즘을 연습할 때도 그렇고, 백엔드작업을 할 때도 그렇고. 이럴때 launch.json 파일을 통해서 쉽게 설정할 수 있다.

1. js파일을 node runtime을 통해서 디버깅하기

해당 파일에서 f5를 클릭하면 자동으로 기본 launch.json템플릿이 완성된다. 이때 실행을 할때 runtimeExcutable에러가 발생한다면 런타임을 명시적으로 지정해주면 된다.

nvm을 사용해 node를 설치할경우 여러개의 노드가 있을 수 있으므로 현재 어떤 노드를 사용하지고 있는지 확인해서 해당 경로를 명시해준다.

# 터미널에서 아래와 같이 어떤 노드를 사용하는지 확인한다. 
which node

아래와 같은 경로가 보이면 해당경로를 명시한다.

/home/broccoli/.nvm/versions/node/v12.18.3/bin/node

아래 예는 기본 템플릿에 runtimeExecutable속성만 추가해줌.

{
  // 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": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/hide-seek.js",
      "runtimeExecutable": "/home/broccoli/.nvm/versions/node/v12.18.3/bin/node"
    }
  ]
}

2. 해당 프로세스 ID에 접근해서 디버깅하기

백엔드에 디버깅을 할때는 로컬호스트를 띄운후 해당 프로세스로 직접 attach해서 디버깅할 수 있다.

프로세스에 연결을 선택하면 아래 설정이 자동으로 생성된다.

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node"
    }
  ]
}

설정이 끝나면 이제 f5를 통해서 언제든 debugger나 브레이킹이 걸리는 것을 확인할 수 있다.