如何使用 angular-cli 在 Angular2 中调试应用程序? [英] How to debug an application in Angular2 using angular-cli?

查看:20
本文介绍了如何使用 angular-cli 在 Angular2 中调试应用程序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有谁知道是否可以在 WebStorm 中使用带有命令行 ng serve 的 angular-cli 调试应用程序?我尝试了这个网址中发布的解决方案:

需要检查的一些事项:

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

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

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

那么 root 的 URL 映射将是

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

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

如果您终于可以看到复选标记,请尝试刷新浏览器页面(重要!!!)- 是否有断点?

如果您设法加载了源映射(您可以看到复选标记,至少在浏览器刷新时命中了一些断点)- 您完成了:) 您的 WebStorm 配置现在是正确的

Does anyone know if it's possible to debug an application using angular-cli with the command line ng serve in WebStorm?. I tried the solution posted in this url:

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

But it didn't work for me and I decided to make a new answer, because it's a little weird that angular-cli doesn't have some tools to do this.

解决方案

Here is my run configuration for Angular2 (2.3) project built with angular-cli (1.0.0-beta.21)

Some things to check:

Do you have checkmarks shown in your breakpoints once the debugger is started and application loaded?

if not, seems sourcemaps are not loaded for some reason. Check if the mappings are correct: open http://localhost:4200/main.bundle.map in browser, see what URLs in "sources": look like. If you see smth like

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

then URL mappings for root would be

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

If you see that the relative paths are used, change URL mappings accordingly.

If finally you can see the checkmarks, try refreshing browser page (important!!!) - are any of breakpoints hit?

If you manage to get sourcemaps loaded (you can see checkmarks, at least some breakpoints are hit on browser refresh) - you are done:) Your WebStorm configuration is now correct

这篇关于如何使用 angular-cli 在 Angular2 中调试应用程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆