Node JS 프로젝트에 Visual Studio Code 디버깅 추가

vscode에서 내 노드 애플리케이션을 디버깅할 수 있다는 것이 유용하다는 것을 알았습니다. 무언가가 작동하지 않는 이유를 파악하기 위해 console.log 명령문을 작성해야 하는 번거로움을 덜어줍니다.

때로는 디버거를 사용하여 테스트도 확인합니다.

많은 사람들에게 새로운 것은 없지만 이것이 기본 애플리케이션과 테스트에 대한 디버깅을 설정하는 데 사용하는 구성입니다.

Launch.json

vscode의 경우 프로젝트에 대한 다양한 시작 구성을 설정해야 합니다. 이것들은 파일.vscode/launch.json에 들어갑니다. 이 파일을 만들어야 할 수도 있습니다.

VSCode를 사용하여 노드 애플리케이션 디버깅

package.json 시작 시 인스펙터 포트를 추가해야 합니다.

npx ts-node-dev --inspect=0.0.0.0:29033

그런 다음 시작 스크립트에서 디버깅할 때 vscode에 해당 포트에 연결하도록 요청할 수 있습니다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Application",
            "port": 29033,
            "type": "node",
            "request": "attach",
            "skipFiles": ["<node_internals>/**"],
            "protocol": "inspector"
        }
        ]
  }

VSCode를 사용하여 Jest 테스트 디버깅

시작 스크립트를 추가하고 알려야 합니다.

jest가 있는 위치(일반적으로 node_modules 폴더

jest 구성이 있는 위치(일반적으로 기본 응용 프로그램 루트 폴더에 있음)

{
    "version": "0.2.0",
    "configurations": [
  {
            "type": "node",
            "request": "launch",
            "name": "Jest All",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": ["--runInBand"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Jest Current File",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": [
                "${fileBasenameNoExtension}",
                "--config",
                "jest.config.js"
            ],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        }
]}

디버거를 사용하려면 디버깅 메뉴를 엽니다.
SHIFT - COMMAND - D
시작 구성을 선택합니다. 그런 다음 녹색 재생 버튼을 클릭합니다.

농담 테스트를 디버그하려면 재생을 클릭할 때 편집기에서 해당 파일을 열어야 합니다.