Debugging VSCode Chrome调试器未在Typescript文件中停止
我正在尝试使用VS Code Chrome调试器调试Angular2(2.0.0-beta.9)和Typescript(v1.8.7)。我正在ts文件中设置断点,但调试器正在显示js。当整个应用程序位于一个文件夹中时,调试器会显示ts,但当应用程序由子文件夹组成时,调试器的行为不正确。起初,我认为它无法解析映射,但我已打开诊断功能,可以看到路径已正确解析 以下是诊断窗口中的一个示例:Debugging VSCode Chrome调试器未在Typescript文件中停止,debugging,visual-studio-code,typescript1.8,Debugging,Visual Studio Code,Typescript1.8,我正在尝试使用VS Code Chrome调试器调试Angular2(2.0.0-beta.9)和Typescript(v1.8.7)。我正在ts文件中设置断点,但调试器正在显示js。当整个应用程序位于一个文件夹中时,调试器会显示ts,但当应用程序由子文件夹组成时,调试器的行为不正确。起初,我认为它无法解析映射,但我已打开诊断功能,可以看到路径已正确解析 以下是诊断窗口中的一个示例: ›Paths.scriptParsed: resolved http://localhost:3000/bin/
›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
}
不幸的是,源代码到Web包文件的正确映射已经更改了几次 您已经在
launch.json
中打开了diagnosticLogging
,这意味着您的JavaScript控制台中应该有如下行:
SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts
这应该让您清楚地知道它试图在哪里搜索您的源代码
然后将sourceMapPathOverrides
条目添加到launch.json
以帮助它查找您的文件。它应该是这样的:
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/SourceFolder/*"
},
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"trace": "verbose"
}
显然,将SourceFolder替换为实际路径
编辑:
2019年,这仍然有效,但您启用它的方式已经改变diagnosticLogging
已被trace
所取代,它只有一个有效值,即trace
因此,您的设置将如下所示:
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/SourceFolder/*"
},
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"trace": "verbose"
}
这将为您提供大量输出,仍然包括以SourceMap:mapping
开头的行,您可以使用这些行构建正确的sourceMapPathOverrides
,如前所述