WebStorm 调试 Angular CLI 应用程序指向 localhost:63276

Question

我有一个通过 Angular CLI 运行的 Angular 应用程序。我正在按照 JetBrains 文档中列出的步骤来调试 here 列出的 Angular CLI 应用程序。当我启动调试模式时，一个新的浏览器会打开about:blank，而不是我在调试配置中指定的http://localhost:4200。此外，当我查看 WebStorm 中的调试器选项卡时，我看到以下内容...

当我在 WebStorm 调试配置中将 localhost:4200 指定为起始 URL 时，为什么 WebStorm 会尝试连接到 localhost:63276？

编辑：我应该提到，在调试配置中，我指定 Chrome 浏览器应使用我指定的用户设置，以便在调试时访问 LastPass 和其他浏览器扩展

Answer 1

63276 是调试器启动的端口，它不应该与您的服务器正在侦听的端口匹配。 请确保在启动调试器之前关闭所有正在运行的 Chrome 实例 - 如错误消息中所述，如果您的 Chrome 正在运行且包含用户数据，则无法打开调试端口。见https://www.jetbrains.com/help/webstorm/configuring-javascript-debugger.html#ws_js_debug_default_chrome_user_data：

要以您熟悉的外观打开一个新的 Chrome 实例，请在 WebStorm 中配置 Chrome 以从您的用户数据开始。在这种情况下，在开始调试会话之前，请始终确保 Chrome 尚未使用您的用户数据运行。否则，WebStorm 仍会使用您的用户数据启动另一个 Chrome 实例，但无法为其打开调试端口。因此，WebStorm 调试器无法连接到新 Chrome 实例中的应用程序，并且调试会话没有启动。