断点被忽略，因为未找到生成的代码

Question

我正在尝试使用 Chrome 调试器扩展在 Windows 7 下的 Visual Studio Code 中为 Angular CLI 生成的 Angular 4 项目设置断点。我收到错误消息：断点被忽略，因为找不到生成的代码

这是我的 tsconfig.json 文件

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

这是我的 launch.json 的内容

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                     "webpack:///./*": "${workspaceRoot}\\*"
            }
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Answer 1

我发现了问题所在。 Visual Studio Code Debugger 仅适用于 Debugger for Chrome、Angular CLI 和 Angular 的特定版本组合。它不适用于带有 Angular CLI 1.0 版本的 Angular 4.0。但是 Angular 4.1.3 和 Angular CLI 1.0.6 工作正常。请按以下步骤操作：

1. 安装 Chrome 调试器可视化代码扩展
2. 在“调试”菜单上，单击“打开配置”

3. 将您的 .vscode\launch.json 修改为如下所示：

   {
       "version": "0.2.0",
       "configurations": [
           {
               "type": "chrome",
               "request": "launch",
               "name": "Launch Chrome against localhost",
               "url": "http://localhost:4200",
               "webRoot": "${workspaceRoot}"
           },
           {
               "type":"chrome",
               "request": "launch",
               "name": "Launch Chrome against Karma",
               "url": "http://localhost:9876/?id=9792346",
               "webRoot": "${workspaceRoot}"
           }
       ]
   }
   

4. 关闭所有 Chrome 浏览器

5. 在应用程序目录的命令行中运行 npm start
6. 在代码中设置断点
7. 在浏览器中按 Control-F5