Angular2使用Augury来调试Angular2程序


Posted in Javascript onMay 21, 2017

Augury-Angular专用的chrome 调试插件

如题,在的2016-12-8谷歌开发者大会上,angular2的leader来给我们演示了angular2的特性,对于已经入门的同学们,已经没有太多新鲜内容,唯有一个内容让我为之一震,就是Augury(现在和VUE对比起来,确实可以看出有谷歌支持下angular2会更活跃,我个人认为2年后恐怕VUE无法与之抗衡),跟Angular-CLI一样,还处于beta阶段,也还有很多问题,但是有些地方已经非常方便开发和调试了,这里看到国内竟然没有一篇文章介绍Augury,我就先抛砖引玉一下介绍下,让大家尝尝鲜!

Augury安装

https://augury.angular.io/

内容和步骤都在这里,非常简单,就是上chrome 应用商城搜索augury,安装一下就可以了,就是一个chrome插件。

Augury特性

1 用augury查看component结构

我的angular2应用中,结构非常简单,就一个主要的AppComponent和一个dashboardComponent

Angular2使用Augury来调试Angular2程序

Angular2使用Augury来调试Angular2程序

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

Angular2使用Augury来调试Angular2程序

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

Angular2使用Augury来调试Angular2程序

点击properties,可以看到具体的component方法和属性,我这里用了一个codemirror的angular2组件(angular2真心好用,连这个组件都有了,不知道vue有没有);可以看出我上面选择了sql模式,这里我的codemirror的mode属性设置的是sql与之呼应;

3 可视化显示component关系

Angular2使用Augury来调试Angular2程序

我的codemirrorComponent是引用进来的component,正是在dashboard下引用,路径正是图中显示的那样。

Angular2使用Augury来调试Angular2程序

4 查看router结构

我的例子router tree不能显示,不知原因,拿augury的demo来说明下,

Angular2使用Augury来调试Angular2程序

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 #Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 #Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
node.js 中间件express-session使用详解
May 20 #Javascript
JS 调试中常见的报错问题解决方法
May 20 #Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 #Javascript
ztree实现权限横向显示功能
May 20 #Javascript
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP 文件系统详解
2012/09/13 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python实现超市扫码仪计费
2018/05/30 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
对python中各个response的使用说明
2020/03/28 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
法制宣传标语集锦
2014/06/25 职场文书
医德医魂心得体会
2014/09/11 职场文书
实习协议书
2015/01/27 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书