VSCode Chrome調試器不停止在Typescript文件中

我正在嘗試使用VS Code Chrome調試器來調試Angular2（2.0.0-beta.9）& Typescript（v1.8.7）。我正在ts文件中設置斷點，但調試器正在顯示js。調試器在整個應用程序位於一個文件夾中時顯示ts，但在應用程序由子文件夾組成時不能正確顯示。起初我以爲它不能解決映射，但我打開了診斷程序，可以看到路徑正在被正確解析。VSCode Chrome調試器不停止在Typescript文件中

下面是來自診斷窗口的一個示例：

›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：

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

來源

2016-03-16 whitemtnelf

不幸的是，正確的映射：

{ 
    "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的部您的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。

來源

2018-01-17 09:51:01

VSCode Chrome調試器不停止在Typescript文件中

回答

相關問題