WebStorm不会在Angular CLI应用中达到断点

Question

我正在使用WebStorm 2019.1.1 Build＃WS-191.6707.60，该版本建于2019年4月16日。我正在尝试调试基于Angular 5.2的Angular应用程序。我遵循了JetBrains support website上的说明以及许多YouTube视频，但看起来调试器永远不会运行或无法达到我的断点。

我按照下面的屏幕截图所示设置运行/调试配置。我正在使用指向localhost:4200的默认Angular CLI配置。 JetBrains支持网站上的说明说，要通过绿色的三角形“播放”按钮启动应用程序，然后一旦应用程序运行，请单击播放按钮旁边的“错误”图标。这会弹出一个对话框，警告该项目不允许并行运行（我取消了该项目）。我还尝试过仅单击“错误”图标，尽管该项目是通过webpack编译并运行的，但它永远不会在WebStorm中设置的断点处停止。

使用开发工具在Chrome中进行调试可以很好地工作，我在此处设置的断点也可以正常工作，但是我真的很希望能够在WebStorm内进行调试。

该说明还提到WebStorm创建了默认的 Angular Application 配置，但我看不到正在创建一个配置。

在使用WebStorm评估之前，我已经执行了此过程，但是在购买许可证并重新安装WebStorm之后，它不再起作用。有什么想法或建议吗？

Answer 1

您已经在 JavaScript调试中的 npm 组上方运行 Angular Application 配置，但是在您的情况下，该配置已折叠。

如果那里没有，它看起来像这样：

Answer 2

默认创建的Angular Application配置。只是带有自定义名称的“ JavaScript调试”配置文件。

点击“ +”图标添加配置，然后选择“ JavaScript Debug”。

示例中的配置用于通过NodeJS在命令行上调试JavaScript。用于调试npm脚本。

您还需要安装JetBrains浏览器扩展。这是Chrome浏览器的链接（我不确定其他浏览器）。

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji

没有扩展名，IDE将无法远程调试浏览器中发生的事情。