TypeScript
디버깅

소개

Visual Studio 코드의 SourceMaps가있는 JavaScript

tsconfig.json 세트에서

"sourceMap": true,

tsc 명령을 사용하여 TypeScript 소스의 js 파일과 함께 매핑을 생성합니다.
launch.json 파일 :

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}\\index.js",
            "cwd": "${workspaceRoot}",
            "outFiles": [],
            "sourceMaps": true
        }
    ]
}

이것은 생성 된 index.js (주 파일이 index.ts 인 경우) 파일과 Visual Studio Code의 중단 점에서 중단되고 TypeScript 코드 내의 변수 값을 해결하는 디버거로 노드를 시작합니다.

WebStorm의 SourceMaps가있는 JavaScript

Node.js 디버그 구성을 만들고 index.js 를 Node 매개 변수로 사용하십시오 .

Visual Studio 코드에 ts-node가있는 TypeScript

Type-Script 프로젝트에 ts-node를 추가하십시오.

npm i ts-node

package.json 스크립트를 추가하십시오.

"start:debug": "ts-node --inspect=5858 --debug-brk --ignore false index.ts"

launch.json 은 node2 유형을 사용하고 시작을 실행하는 npm을 시작하도록 구성되어야합니다 start:debug 스크립트 :

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node2",
            "request": "launch",
            "name": "Launch Program",
            "runtimeExecutable": "npm",
            "windows": {
                "runtimeExecutable": "npm.cmd"
            },
            "runtimeArgs": [
                "run-script",
                "start:debug"
            ],
            "cwd": "${workspaceRoot}/server",
            "outFiles": [],
            "port": 5858,
            "sourceMaps": true
        }
    ]
}

WebStorm에 ts-node가있는 TypeScript

이 스크립트를 package.json 추가하십시오.

"start:idea": "ts-node %NODE_DEBUG_OPTION% --ignore false index.ts",

스크립트를 마우스 오른쪽 버튼으로 클릭하고 'test : idea'만들기 ...를 선택한 다음 'OK'를 선택하여 디버그 구성을 만듭니다.

다음 구성을 사용하여 디버거를 시작하십시오.