Visual Studio 代码调试不适用于 Angular 6 CLI答案

【问题标题】：Visual Studio Code Debugging Not Working with Angular 6 CLIVisual Studio 代码调试不适用于 Angular 6 CLI
【发布时间】：2019-08-09 07:49:19
【问题描述】：

您好，我正在尝试在 Visual Studio 代码中调试应用程序，但无法调试，它显示错误消息“不支持已配置的调试类型'chrome'”。

下面是launch.json文件代码

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [

    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 4200,
        "webRoot": "${workspaceFolder}"
    }
]
}

【问题讨论】：

你安装了 chrome 扩展吗？
this 是您想要让它工作的方法。

标签： angular debugging visual-studio-code angular6

【解决方案1】：

你应该关注这个tutorial，做得很好。

另外，不要忘记在启动调试器时需要启动您的应用程序。

【讨论】：

【解决方案2】：

您需要在现有配置中添加以下“webRoot”：

"sourceMapPathOverrides": {
    "/./*": "${webRoot}/*",
    "/src/*": "${webRoot}/*",
    "/*": "*",
    "/./~/*": "${webRoot}/node_modules/*",
  }

【讨论】：

【解决方案3】：

任何正在寻找快速修复的人都可以试试这个：

确保您在 Launch.json 设置中的端口号与您在“ng serve”命令后获得的端口号相同。通常它是“4200”并尝试在 Launch.json 中包含启动和附加设置。

一旦“ng serve”完成并且 angular server 开始监听尝试点击“开始调试”

然后调试器将在 4200 上启动一个 chrome 实例，然后您可以看到断点将被绑定。

不要通过在浏览器中输入链接（http://localhost:4200/）手动启动它

【讨论】：