TypeScript
Debug
Ricerca…
introduzione
Esistono due modi per eseguire e eseguire il debug di TypeScript:
Trasponi in JavaScript , esegui nel nodo e utilizza i mapping per riconnettersi ai file di origine TypeScript
o
Esegui TypeScript direttamente usando ts-node
Questo articolo descrive entrambi i modi utilizzando Visual Studio Code e WebStorm . Tutti gli esempi presuppongono che il tuo file principale sia index.ts .
JavaScript con SourceMaps nel codice di Visual Studio
Nel set tsconfig.json
"sourceMap": true,
per generare mapping con i file js dalle origini TypeScript usando il comando tsc
.
Il file launch.json :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}\\index.js",
"cwd": "${workspaceRoot}",
"outFiles": [],
"sourceMaps": true
}
]
}
Questo avvia il nodo con il file index.js generato (se il file principale è index.ts) e il debugger in Visual Studio Code che si ferma sui punti di interruzione e risolve i valori delle variabili all'interno del codice TypeScript.
JavaScript con SourceMaps in WebStorm
Creare una configurazione di debug Node.js e utilizzare index.js
come parametri del nodo .
TypeScript con ts-node in Visual Studio Code
Aggiungi ts-node al tuo progetto TypeScript:
npm i ts-node
Aggiungi uno script al tuo package.json
:
"start:debug": "ts-node --inspect=5858 --debug-brk --ignore false index.ts"
launch.json
deve essere configurato per utilizzare il tipo node2 e avviare npm eseguendo l' start:debug
script di 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
}
]
}
TypeScript con ts-node in WebStorm
Aggiungi questo script al tuo package.json
:
"start:idea": "ts-node %NODE_DEBUG_OPTION% --ignore false index.ts",
Fai clic destro sullo script e seleziona Crea 'test: idea' ... e conferma con 'OK' per creare la configurazione di debug:
Avvia il debugger usando questa configurazione: