我的成长磨练,每天写博客,年轻人,卷起袖子,来把手弄脏吧! ------ 博客首页

Google放大招,Angular2专用chrome调试插件

Google放大招,推出Angular2专用chrome调试插件Augury。现在和VUE对比起来,确实可以看出有谷歌支持下angular2会更活跃,我个人认为2年后恐怕VUE无法与之抗衡,Augury还处于beta阶段,也还有很多问题,但是有些地方已经非常方便开发和调试了,大家可以来尝尝鲜!

Augury安装

https://augury.angular.io/

Augury特性

1 用augury查看component结构

ng2-admin项目结构

Google放大招,Angular2专用chrome调试插件

ng2-admin对应的的component结构

Google放大招,Angular2专用chrome调试插件

运行应用,打开浏览器查看页面,在开发者工具中可以看到,ComponentTree,这里可以非常清晰的看出appComponent的结构图,hover到component上面时,页面也会显示相应的位置。

2 查看单个Component的具体属性和方法

Google放大招,Angular2专用chrome调试插件

3 可视化显示component关系

Google放大招,Angular2专用chrome调试插件

4 查看router结构

Google放大招,Angular2专用chrome调试插件

结构真是一目了然,真是太牛逼了。

这些router结构,component结构可以帮助看看应用的结构是否存在问题。components中的具体方法,属性,用来调试具体内容的逻辑,有时候想换设一个值调下看看,可以直接在properties中改掉。

水太深,大家自行研究。

 


 

更多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿


posted @ 2017-04-19 11:17  全栈弄潮儿  阅读(1495)  评论(0编辑  收藏  举报

全栈弄潮儿 - 创建于 2015年5月5日

这是一位web前端开发工程师的个人站,内容主要是网站开发方面的技术文章,大部分来自学习或工作,部分来源于网络,希望对大家有所帮助。

致力于web前端开发,关注互联网前沿技术与趋势。


vue2-admin-grace | ionic3-awesome | Bootstrap中文网