无法使用 WebStorm 调试 Angular

Question

我有一个 Angular 应用程序（Angular 2），我可以毫无问题地从 WebStorm 启动它，但是当我尝试设置断点时，它们都没有被命中。WebStorm 报告调试器已附加并且 webpack 已成功编译。我打开浏览器到 localhost:4200 并且我的应用程序加载正常，只是我的断点没有被命中。我还安装了 JetBrains IDE 扩展，但我的理解是不再需要它了。

Answer 1

第 1 步：点击右上角的下拉菜单 > 编辑配置

第 2 步：在运行调试配置下>点击+符号并选择 Javascript Debug

第 3 步：确保您在 Javascript 调试下创建了新配置文件（在我的情况下，配置文件名称是 Angular Applicaiton > URL：http://localhost:4200

第 4 步：一旦一切设置正确。确保从下拉列表中选择正确的配置文件，如下所示

第 5 步：确保您在终端中通过 ng s 为您的应用程序提供服务，然后单击调试按钮（记住不要点击播放绿色按钮）。按照上面的屏幕截图按红色错误按钮..

它现在应该在新窗口中打开 localhost:4200

注意：确保在 ts 文件中添加了足够的断点以进行调试

现在你的断点肯定会起作用。

Answer 2

经过多次尝试和错误，我终于让它工作了。

1. 我使用 WebStorm“npm”模板设置调试配置（下面的屏幕截图）。您可以忽略屏幕截图中的 Script 参数，因为这只是一个别名（位于package.json），指向包含外部 API 端点（DEV、Production、Stage 等）代理的 JSON 文件
2. 从这里我可以启动我的 Angular 应用程序，webpack 将编译所有内容
3. 此时，我的应用程序将正常运行，但不会遇到断点。然后我安装了 JetBrains IDE 支持 Chrome 扩展。安装后，我右键单击扩展并选择“在 WebStorm 中检查”选项。此时，WebStorm IDE 打开了第二个名为“localhost:4200”的调试窗口。每当我触发它们时，我设置的任何断点都会被击中。

所以他们的关键是 JetBrains IDE 支持 Chrome 扩展。据我了解，在较新版本的 WebStorm 中不再需要它，但似乎调试我的 Angular 应用程序仍然需要它。可以从此处的Chrome 扩展商店下载。

我希望这对其他人有帮助，因为它让我发疯了很长时间。

NPM 调试配置

Webpack编译

调试窗口位于http://localhost:4200