VSCode Chrome 调试器未在 Typescript 文件中停止答案

【问题标题】：VSCode Chrome debugger not stopping in Typescript fileVSCode Chrome 调试器未在 Typescript 文件中停止
【发布时间】：2016-07-02 23:04:56
【问题描述】：

我正在尝试使用 VS Code Chrome 调试器来调试 Angular2 (2.0.0-beta.9) 和 Typescript (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
}

【问题讨论】：

标签： debugging visual-studio-code typescript1.8

【解决方案1】：

很遗憾，您的源代码到 Webpack 文件的正确映射已经更改了几次。

您已经在您的launch.json 中打开了diagnosticLogging，这意味着您的 JavaScript 控制台中应该有类似这样的行：

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

这应该让您清楚地了解它试图在哪里搜索您的源代码。

然后您将sourceMapPathOverrides 条目添加到launch.json 以帮助它找到您的文件。它应该看起来像这样：

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

显然，将 SourceFolder 替换为实际路径。

编辑： 在 2019 年，这仍然有效，但启用它的方式发生了变化。 diagnosticLogging 已替换为 trace，它只有一个有效值，即 trace。

所以您的设置将如下所示：

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

这将为您提供大量输出，仍然包括以 SourceMap: mapping 开头的行，您可以使用它们来构建正确的 sourceMapPathOverrides 集，如前所述。

【讨论】：