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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
如何编写jquery插件
Mar 29 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue的常用组件操作方法应用分析
Apr 13 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动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
javascript实现继承的简单实例
2015/07/26 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
Python代码的打包与发布详解
2014/07/30 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
技校生自我鉴定
2013/12/08 职场文书
高中政治教学反思
2014/01/18 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
2014年元旦感言
2014/03/06 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
班组拓展活动方案
2014/08/14 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
单位工作证明格式模板
2014/10/04 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
MySQL查询学习之基础查询操作
2021/05/08 MySQL
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS