Отладка VSCode Chrome не останавливается в файле машинописных файлов

Question

Я пытаюсь использовать отладчик HTML кода VS для отладки Angular2 (2.0.0-beta.9) & Typcript (v1.8.7). Я устанавливаю точку прерывания в файле ts, но отладчик отображает js. Отладчик показывает ts, когда все приложение находится в одной папке, но не корректно ведет себя, когда приложение состоит из подпапок. Сначала я думал, что он не смог разрешить сопоставление, но у меня есть диагностика, и я вижу, что пути правильно решены.

Вот пример из диагностического окна:

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

Участок от 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

К сожалению, правильного отображения ваш исходный код в файл Webpack несколько раз менялся.

Вы уже diagnosticLogging включен в вашем launch.json, что означает, что вы должны иметь такие строки в консоли JavaScript:

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

Это должно дать вам четкое представление о том, где он пытается найти ваш исходный код.

Затем вы добавляете запись sourceMapPathOverrides в launch.json, чтобы помочь найти ваши файлы. Он должен выглядеть примерно так:

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

Очевидно, что вместо SourceFolder следует заменить фактический путь.