无法使用 WebStorm 调试 Angular

Question

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

Answer 1

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

第 2 步：在运行调试配置下 > 点击 + 符号和 select Javascript 调试

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

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

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

现在应该在新 window

中打开 localhost:4200

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

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

Answer 2

经过反复试验，我终于让它工作了。

我使用 WebStorm "npm" 模板设置调试配置（下面的屏幕截图）。您可以忽略屏幕截图中的脚本参数，因为这只是一个指向 JSON 文件的别名（位于 package.json），该文件包含外部 API 端点（DEV、Production、Stage）的代理等)
从这里我可以启动我的 Angular 应用程序，webpack 会编译一切
此时我的应用程序会正常运行但不会命中断点。然后我安装了 JetBrains IDE 支持 Chrome 扩展。安装后，我右键单击扩展并选择 "Inspect in WebStorm" 选项。那时 WebStorm IDE 打开了第二个 DEBUG window 名为 "localhost:4200"。我设置的任何断点在我触发它们时都会命中。

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

下载

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

NPM 调试配置

Webpack编译

调试 window 在 http://localhost:4200

Answer 3

为我工作我希望它会有所帮助：
1.run 具有调试模式
2.Hold Ctrl+Shift 并单击此 URL ex.(http://localhost:4200)

WebStorm 使用自动生成的 Angular 类型 JavaScript 调试的应用程序配置启动调试会话，如官方文档中所写 https://www.jetbrains.com/help/webstorm/angular.html#angular_running_and_debugging_debug

Answer 4

我知道答案已经在这里，但可能有人会觉得有用

根据文档

 Debugging of Angular applications is only supported with Node.js version 16 and earlier.

所以检查Node版本，如果版本高，调试器不会停在断点处 https://www.jetbrains.com/help/webstorm/angular.html

无法使用 WebStorm 调试 Angular

Unable to debug Angular with WebStorm

debugging

webstorm

angular