如何使用 angular-cli 在 Angular2 中调试应用程序？

Question

有谁知道是否可以在 WebStorm 中使用 angular-cli 和命令行 ng serve 来调试应用程序？我尝试了此网址中发布的解决方案：

How to debug angular 2 app using angular-cli webpack?

但这对我没有用，我决定提出一个新的答案，因为 angular-cli 没有一些工具可以做到这一点有点奇怪。

Answer 1

这是我使用 angular-cli (1.0.0-beta.21) 构建的 Angular2 (2.3) 项目的运行配置

需要检查的一些事项：

调试器启动并加载应用程序后，您的断点中是否显示复选标记？

如果没有，似乎由于某种原因未加载源映射。检查映射是否正确：在浏览器中打开http://localhost:4200/main.bundle.map，查看"sources": 中的URL 是什么样的。如果你看到类似的东西

"webpack:////User/devuser/Develop/MyWebApp/src/app/index.ts"

那么根的 URL 映射将是

webpack:////User/devuser/Develop/MyWebApp

如果您看到使用了相对路径，请相应地更改 URL 映射。

如果您最终可以看到复选标记，请尝试刷新浏览器页面（重要！！！） - 是否有任何断点命中？

如果你设法加载了源地图（你可以看到复选标记，至少在浏览器刷新时会遇到一些断点） - 你就完成了:) 你的 WebStorm 配置现在是正确的

Answer 2

我终于让它工作了！我在这里记录它，以供我自己和其他人在未来提供帮助。

注意：使用 Angular v6 测试

步骤：

1. 安装 JetBrains IDE 支持 chrome 扩展
2. 转到选项并设置端口63342（NOT 4200）如下：
3. 现在在 webstorm IDE 中，运行 > 编辑配置。
4. 点击+按钮选择Javascript Debug并添加如下图所示的设置，然后点击应用按钮。
5. 进入设置>构建、执行和部署>调试器，设置如下：
6. 运行调试器（运行 > 调试）
7. 像通常在 cmd/终端中那样运行 ng serve。
8. 在 Chrome 中运行 http://localhost:4200/
9. 现在您可以在 webstorm IDE 中设置断点并进行调试。