Debuger Chrome VSCode nie zatrzymuje się w pliku maszynopisu

Question

Próbuję użyć debuggera VS Code Chrome do debugowania Angular2 (2.0.0-beta.9) & Maszynopis (v1.8.7). Ustawiam punkt przerwania w pliku ts, ale debugger wyświetla js. Debugger pokazuje ts, gdy cała aplikacja znajduje się w jednym folderze, ale nie zachowuje się poprawnie, gdy aplikacja składa się z podfolderów. Początkowo myślałem, że nie jest w stanie rozwiązać mapowania, ale mam włączoną diagnostykę i widzę, że ścieżki są prawidłowo rozwiązywane.

Oto przykład z okna diagnostycznego:

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

Odcinek od 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

niestety prawidłowym odwzorowaniu Twój kod źródłowy do pliku Webpack zmienił się kilka razy.

Masz już diagnosticLogging włączona w twojej launch.json, co oznacza, że ​​trzeba mieć linie takie jak te w konsoli javascript:

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

To powinno dać jasny obraz tego, gdzie stara się wyszukać swoje kod źródłowy.

Następnie należy dodać wpis sourceMapPathOverrides do launch.json, aby ułatwić odnalezienie plików. Powinno to wyglądać mniej więcej tak:

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

Oczywiście, zastępując SourceFolder rzeczywistą ścieżką.