VSCode Chrome Debugger nicht in Typescript-Datei

Question

Ich versuche, den VS-Code Chrome-Debugger zum Debuggen Angular2 (2.0.0-Beta.9) & Typescript (v1.8.7). Ich setze den Unterbrechungspunkt in der ts Akte, aber der Debugger zeigt die js an. Der Debugger zeigt die ts an, wenn sich die gesamte Anwendung in einem Ordner befindet, verhält sich jedoch nicht korrekt, wenn die Anwendung aus Unterordnern besteht. Zuerst dachte ich, es wäre nicht in der Lage, das Mapping zu lösen, aber ich habe die Diagnose eingeschaltet und kann sehen, dass die Pfade richtig gelöst werden.

Hier ist ein Beispiel aus dem Diagnosefenster:

›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" 
    ] 
} 

Der Abschnitt von 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

Leider die richtige Zuordnung von Ihr Quellcode für die Webpack-Datei wurde einige Male geändert.

Sie haben bereits diagnosticLogging in Ihrem launch.json eingeschaltet, was bedeutet, dass Sie Zeilen wie diese in Ihrem JavaScript-Konsole haben sollte:

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

Dies sollte Ihnen eine klare Vorstellung davon, wo sie zu suchen versucht, Ihre Quellcode.

Dann fügen Sie einen sourceMapPathOverrides Eintrag zu launch.json hinzu, um die Suche nach Ihren Dateien zu erleichtern. Es sollte in etwa so aussehen:

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

Offensichtlich ersetzen SourceFolder mit dem tatsächlichen Pfad.