WebStorm在Angular CLI应用程序中没有遇到断点

Question

我正在使用构建于2019年4月16日的WebStorm 2019.1.1 Build＃WS-191.6707.60。我正在尝试调试基于Angular 5.2的Angular应用程序。我按照JetBrains support website上的说明以及大量的YouTube视频，但看起来调试器从未运行或遇到我的断点。

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

使用开发工具在Chrome中进行调试工作正常，我在那里设置的断点工作正常，但我真的希望能够在WebStorm内部进行调试。

该指令还提到WebStorm创建了一个默认的Angular Application配置，但我没有看到正在创建一个。

在使用WebStorm的评估之前，我已经完成了这个过程，但是在我购买了许可证并重新安装WebStorm之后它就不再有效了。有什么想法或建议吗？

Answer 1

您在JavaScript Debug中的npm组上面有Angular Application运行配置，但在您的情况下它已折叠。

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

Answer 2

默认情况下创建的Angular Application配置。只是具有自定义名称的“JavaScript Debug”配置文件。

单击“+”图标以添加配置并选择“JavaScript Debug”。

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

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

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

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