使用 VS Code 启动 Angular 应用程序时 Chrome 挂起答案

【问题标题】：Chrome Hangs when launching Angular App with VS Code使用 VS Code 启动 Angular 应用程序时 Chrome 挂起
【发布时间】：2019-12-17 14:38:00
【问题描述】：

我有一个 Angular 7 CLI 应用程序，当我尝试使用 Chrome(76) 和 VS Code(1.37) 对其进行调试时，它会使 chrome 挂起。我什至无法打开调试工具并检查 index.html，但我运行 ng serve 就好了。我什至可以在现有的 chrome 和 firefox 选项卡中打开 http://localhost:4200/#/ 并加载页面，但是当我尝试从 VS Code 启动 chrome 进行调试时，浏览器中没有加载任何内容。

我已经为 launch.json 尝试了几个不同的配置，它们的结果相同

开箱即用的配置

    {
  "name": "ng serve",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:4200/#",
  "webRoot": "${workspaceFolder}"
},

高级配置：https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "name": "ng serve",
  "type": "chrome",
  "request": "launch",
  "preLaunchTask": "npm: start",
  "url": "http://localhost:4200/#",
  "webRoot": "${workspaceFolder}",
  "sourceMapPathOverrides": {
    "webpack:/*": "${webRoot}/*",
    "/./*": "${webRoot}/*",
    "/src/*": "${webRoot}/*",
    "/*": "*",
    "/./~/*": "${webRoot}/node_modules/*"
  }
},

我尝试了其他一些方法但没有成功：

重新安装 chrome
安装 VS Code 1.36
安装 Vs Code Insiders
我重新启动了我的 windows 机器。
克隆我的 repo 的新副本，运行 npm install 并重建应用程序

所以我创建了一个新的空 Angular CLI 应用程序ng new，并且能够很好地调试它。这让我相信它与 chrome 或 vs code 无关。然后我决定试一试firefox调试，它工作得很好，但现在我真的很困惑。

    {
  "type": "firefox",
  "request": "launch",
  "reAttach": true,
  "name": "Launch Firefox localhost",
  "url": "http://localhost:4200/#",
  "webRoot": "${workspaceFolder}"
},

【问题讨论】：

标签： angular google-chrome visual-studio-code google-chrome-devtools vscode-debugger

【解决方案1】：

这是我的开发人员机器的安全相关问题。我能够通过使用不同的基于铬的浏览器（Opera、Edge Beta、Brave）来解决这个问题。

https://github.com/microsoft/vscode-chrome-debug/issues/911

【讨论】：