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

Question

我有一个 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 的新副本，运行ning 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}"
},

Answer 1

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

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

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

Chrome Hangs when launching Angular App with VS Code

google-chrome

google-chrome-devtools

visual-studio-code

angular

vscode-debugger