Debug del Codice TypeScript con Visual Studio Code

Introduzione

Il debugging è una parte essenziale dello sviluppo software, e Visual Studio Code (VS Code) offre strumenti potenti per eseguire il debug TypeScript in modo semplice ed efficiente. In questo articolo vedremo come configurare e avviare il debug di un progetto TypeScript utilizzando il Debugger integrato e la configurazione di lancio personalizzata. Con il debug TypeScript in VS Code puoi identificare e correggere errori rapidamente, impostare breakpoint, ispezionare variabili e migliorare il tuo flusso di lavoro.

Se non sai come creare un progetto TypeScript, consulta il nostro articolo dedicato: Come Installare TypeScript e Creare la Prima Applicazionet.

1. Compilazione e impostazioni del debug

Il codice TypeScript deve essere compilato in JavaScript prima di poter essere eseguito e debuggato. Modifica il file tsconfig.json per abilitare la generazione dei file di mappa di origine (sourceMaps).

Prima la configurazione era così:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

Ora, con l’aggiunta di sourceMap, diventa così:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true
  }
}

Approfondimento

• sourceMap: abilita la generazione delle mappe di origine (sourceMaps), che consentono di eseguire il debug del codice TypeScript visualizzandolo direttamente invece della versione compilata in JavaScript.

Per una spiegazione dettagliata degli altri campi, consulta la documentazione ufficiale di TypeScript.

2. Configurazione del Debugger in VS Code

Per abilitare il debugging, crea un file .vscode/launch.json e aggiungi la seguente configurazione:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/src/index.ts",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true,
      "preLaunchTask": "tsc: build - tsconfig.json"
    }
  ]
}

Questa configurazione:

• Esegue il debug con Node.js
• Lancia il file index.ts dalla cartella src
• Usa i file compilati nella cartella dist
• Abilita le mappe di origine per facilitare il debug
• Esegue il task di build prima di avviare il debug

3. Aggiunta di Breakpoint e Debugging

Apri un file TypeScript e imposta un breakpoint facendo clic sul margine sinistro della riga desiderata. Avvia il debug premendo F5 o cliccando sull’icona del play nel pannello Debug di VS Code.

Puoi anche usare debugger; nel codice per interrompere l’esecuzione automaticamente:

function greet(name: string): string {
    debugger;
    return `Hello, ${name}!`;
}

console.log(greet("World"));

Quando il codice raggiunge questa riga, il debugger si fermerà automaticamente.

Conclusione

Seguendo questi passaggi, puoi configurare facilmente il debugging di TypeScript in Visual Studio Code. Questo ti permetterà di individuare e risolvere bug nel codice in modo più rapido ed efficiente.