VS Code 源代码未正确映射答案

【问题标题】：VS Code source code wan not properly mappedVS Code 源代码未正确映射
【发布时间】：2017-06-23 01:35:25
【问题描述】：

我正在尝试从 vs 代码运行 angular2 项目。这里是 tsconfig、lanuch.json 文件。

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}/src",
            "sourceMaps": true
            // "runtimeExecutable": "/usr/bin/chromium-browser",
            // "sourceMapPathOverrides": {
            //     "webpack:///*": "/*"
            // }
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src"
            // "sourceMapPathOverrides": {
            //     "webpack:///*": "/*"
            // }
        }
    ]
}

我无法在我的 vscode 编辑器上设置断点。如果我这样做，它会因为映射问题而自动被禁用。

【问题讨论】：

改用 chrome 调试器，您也可以将 debug; 放入您的代码中，这样它将在 chrome 调试器中自动触发。我有类似的问题，暂时放弃尝试使用 vscode 调试我的 Angular 2 应用程序。
我已经在 Vscode 上安装了 Chrome 调试器，debug; 内部代码显示错误。
我是想在 chrome 浏览器中调试 :))
在 chrome 浏览器中，我也无法在某些地方设置断点。如果我这样做，那么它会停在不同的位置，比如说如果我为第 10、11、12 行添加断点，它直接到 12。而且我无法查看变量（存在于行上）的内容。
ya.. 我的项目使用 anguylar cli

标签： javascript angular typescript visual-studio-code

【解决方案1】：

我在另一个问题中添加了a full explanation，但这里有一个快速回顾：

将此添加到您的launch.json：

"diagnosticLogging": true

这会将大量额外信息转储到控制台中。只需查找您的 TypeScript 文件之一的名称，您就会看到 Chrome 期望找到您的源文件的路径。调整您的 sourceMapPathOverrides 以帮助它匹配实际路径，然后您就可以开始了。

【讨论】：