如何使用angular-cli webpack调试角度app？
ger*_*678 47 intellij-idea google-chrome-devtools typescript angular-cli angular
之前我使用angular-cli@1.0.0-beta.10,现在我更新到angular-cli @ webpack beta.11.经过大量的自定义更改,我得到了它的工作.
唯一的问题是,现在我无法使用webstorm和chrome调试器调试我的角度应用程序,因为我没有使用ng服务获取任何ts文件.使用angular-cli@1.0.0-beta.10,使用Jetbrains插件调试我的应用程序非常容易.
如何使用Web服务调试我的角度应用程序和使用ng服务的Chrome调试器？
ger*_*678 53
如何使用angular/cli进行调试
新的angular/cli版本使用webpack,它不会将ts文件编译到dist之前的本地目录(直到beta 1.0.0-beta.10).现在它使用一些类似内存的方法.
但您可以在"来源"标签中的Chrome开发者工具中找到ts文件.
(新)angular/cli@1.0.0-beta.26和更新的解决方案
注意:此解决方案已使用版本1.0.0-beta.26和1.2.1进行测试
注意:在这个例子中,我使用了端口5321而不是4200.只需使用你的端口.
使用Chrome开发者工具进行调试
在运行ng serve(也用于npm start)时,您可以在Chrome开发者工具部分找到您的来源:"webpack://":
使用JetBrains IDE使用angular/cli调试Angular 2 App
只需将Webstorm/PHPStorm中的运行/调试配置编辑为以下内容:
- 将项目目录的远程URL路径设置为
webpack://. - 将src目录的远程URL路径设置为
webpack://./src
(旧)解决方案angular-cli@1.0.0-beta.10 - .14
使用Chrome开发者工具进行调试
在运行ng serve(也用于npm start)时,您可以在Chrome开发者工具部分找到您的来源:"webpack://":
使用JetBrains IDE使用angular-cli @ webpack调试Angular 2 App
只需将Webstorm/PHPStorm中的运行/调试配置编辑为以下内容:将项目目录的远程URL路径设置为
webpack:////Users /...FULL_PATH .. //在Mac OSX上
要么
webpack:/// C:/...FULL_PATH .. // Windows上的示例
注意:在Windows上你只需要3个斜杠,在Mac上你需要在"webpack:"之后有4个斜杠
您还可以访问http:// localhost:4200/main.map并搜索任何".ts"文件来检查您的路径.您可以轻松复制此文件的路径并将其粘贴到IDE配置对话框中.
编辑:也许你需要映射添加"/ src"的路径到你的src文件夹.谢谢@ born2net
玩得开心.
- 在使用带有webpack构建的Chrome进行调试的情况下,我发现的一个问题是,有时候无法正确设置断点,源图可能搞砸了.这就是我恢复使用systemjs构建开发的原因(设置断点没有问题) (3认同)
- 有道理.我希望(希望!)源映射将被修复.否则,角度cli是一个很好的工具,我只希望变得更好. (2认同)
bor*_*net 13
确定它正常工作,你需要映射root和src.看这里:
希望它可以帮助某人,
让我补充说,有时调试器会错过你的断点,所以在断点之前添加alert('foo')或调试器代码.
TX
将jspm项目添加并转换到新的cli Angular 2 Kitchen sink:http://ng2.javascriptninja.io 和source @ https://github.com/born2net/ng2Boilerplate 问候,
肖恩
| 归档时间： |
|
| 查看次数： |
19513 次 |
| 最近记录： |