VSCode Il debugger di Chrome non si ferma nel file Typescript

Question

Sto provando a utilizzare il debugger di codice VS Chrome per eseguire il debug di Angular2 (2.0.0-beta.9) & Typescript (v1.8.7). Sto impostando il punto di interruzione nel file ts ma il debugger sta visualizzando il js. Il debugger mostra ts quando l'intera applicazione si trova in una cartella, ma non si comporta correttamente quando l'applicazione è composta da sottocartelle. All'inizio ho pensato che non fosse in grado di risolvere il mapping ma ho attivato la diagnostica e posso vedere che i percorsi sono stati risolti correttamente.

Ecco un esempio dalla finestra di diagnostica:

›Paths.scriptParsed: resolved http://localhost:3000/bin/hero/hero.service.js to c:\MyDev\ng2\bin\hero\hero.service.js. webRoot: c:\MyDev\ng2 
›SourceMaps.createSourceMap: Reading local sourcemap file from c:\MyDev\ng2\bin\hero\hero.service.js.map 
›SourceMap: creating SM for c:\MyDev\ng2\bin\app.component.js 
›SourceMap: no sourceRoot specified, using script dirname: c:\MyDev\ng2\bin 
›SourceMaps.scriptParsed: c:\MyDev\ng2\bin\app.component.js was just loaded and has mapped sources: ["c:\\MyDev\\ng2\\app\\app.component.ts"] 
›SourceMaps.scriptParsed: Resolving pending breakpoints for c:\MyDev\ng2\app\app.component.ts 

tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "bin" 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings" 
    ] 
} 

Il tratto da launch.json:

{ 
    "name": "Launch localhost with sourcemaps", 
    "type": "chrome", 
    "request": "launch", 
    "url": "http://localhost:3000/index.html", 
    "sourceMaps": true, 
    "webRoot": "${workspaceRoot}", 
    "diagnosticLogging": true 
} 

Answer 1

Purtroppo, la corretta mappatura delle il codice sorgente del file Webpack è stato modificato alcune volte.

Hai già diagnosticLogging attivata nel launch.json, il che significa che si dovrebbe avere linee come questi nella vostra console JavaScript:

SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts 

Questo dovrebbe dare una chiara idea di dove si sta cercando di cercare il tuo codice sorgente.

Quindi aggiungere una voce sourceMapPathOverrides allo launch.json per facilitare la ricerca dei file. Dovrebbe apparire in questo modo:

"sourceMapPathOverrides": { 
    "webpack:///./*": "${workspaceRoot}/SourceFolder/*" 
}, 

Ovviamente, sostituire SourceFolder con il percorso effettivo.