Angular2使用Augury来调试Angular2程序

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

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

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

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

3 可视化显示component关系

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

4 查看router结构

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

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

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

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

(0)

相关推荐

  • Angular2使用Augury来调试Angular2程序

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

  • 调试PHP程序的多种方法介绍

    调试的定义:通过一定方法,在程序中找到并减少缺陷的数量,从而使其能正常工作. 这里说一些如何调试PHP程序的经验. 一.PHP自带的调试功能 1.自带的报错功能 两个名词:开发环境是开发人员在进行开发和调试的环境,生产环境是最终客户在用的线上环境: 开发环境和生产环境要分开设置报错功能. (1)开发环境 开发环境需要打开报错,以下是php.ini的配置项及其说明: 复制代码 代码如下: ; This directive sets the error reporting level. ; Deve

  • 如何使用GDB调试PHP程序

    一般来说,GDB主要完成下面四个方面的功能: (1)启动你的程序,可以按照你的自定义的要求随心所欲的运行程序. (2)可让被调试的程序在你所指定的调置的断点处停住.(断点可以是条件表达式) (3)当程序被停住时,可以检查此时你的程序中所发生的事. (4)动态的改变你程序的执行环境. 1.简介 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.如果你是在 UNIX平台下做软件,你会发现GDB这个调试工具有比VC.BCB的图形化调试器更强大的功能.同时GDB也具有例如ddd这样的图形化

  • 如何利用Emacs来调试C++程序

    俗话说,Emacs是神的编辑器,而Vim是编辑器之神.高手程序员都是用这两样神器进行开发.本人觉得,Emacs之所以厉害,是因为许多在其他编辑器下必须用鼠标点选很多步的操作,在Emacs下都可以通过键盘来完成.大大地节省了你在显示器上找按钮的时间.Emacs在Linux上运行感觉比windows流畅些,用Emacs编辑程序时,手基本不用离开键盘,就可以完成所有的工作.那么今天就让我们看看如何利用Emacs来调试C++程序. 一.安装Emacs和GCC 下载地址:Emacs:http://www.

  • 调试Python程序代码的几种方法总结

    程序能一次写完并正常运行的概率很小,基本不超过1%.总会有各种各样的bug需要修正.有的bug很简单,看看错误信息就知道,有的bug很复杂,我们需要知道出错时,哪些变量的值是正确的,哪些变量的值是错误的,因此,需要一整套调试程序的手段来修复bug. 第一种方法简单直接粗暴有效,就是用print把可能有问题的变量打印出来看看: # err.py def foo(s): n = int(s) print '>>> n = %d' % n return 10 / n def main(): f

  • 使用PDB模式调试Python程序介绍

    以前在windows下一直用的idel带的功能调试python程序,在linux下没调试过.(很多时候只是print)就从网上查找一下~ 方法: 复制代码 代码如下: python -m pdb a.py a.py是python文件. (Pdb)模式下的常用命令: q 退出debug h 即help,打印所有可以命令 h w 打印命令 w 的含意 n 执行当前行直到到达下一行或直到它返回 s 执行当前行,一有可能就停止(比如当前行有一个函数调用).它和n(next)的区别是当前行中有函数调用时s

  • 使用NetBeans + Xdebug调试PHP程序的方法

    按照网络上的资料配置好调试环境后实际试用了发现功能较为简陋,单文件调试还可,如果是跨文件调试项目就不那么舒服了,试用过程中因为DBGP插件也存在许多缺陷,烦恼不断,经常性地stack overflow,很是遗憾.后来想想Np++只是Editor,不要对它强求过多,插件的版本也比较低,存在许多BUG也是可以理解的,等它慢慢完善再说吧,开源社区的力量可是很强大的,^^.昨晚在坛里某位同志的博文里再次见到了NetBeans这个熟悉的字眼(之前选开发环境的时候因为NB非常强大,功能设置很人性化,界面非常

  • 调试php程序的简单步骤

    一般如何调试php程序? 一般使用Xdebug,Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. 第一步.下载xdebug 有两个版本带有Non-thread-safe和不带有Non-thread-safe,缩写(ts)主要是看你的php版本是否线程安全版本. 然后把下载的dll拷贝到php里面的ext文件夹里(扩展dll都在这里),改名为php_xdebug.dll 小编用的Windows7 + apache + mysql

  • 利用Pycharm断点调试Python程序的方法

    1.代码 准备没有语法错误的Python程序: #!/usr/bin/python import numpy as np class Network: def __init__(self,sizes): self.num_layers=len(sizes) self.sizes=sizes self.biases=[np.random.randn(y,1) for y in sizes[1:]] self.weights=[np.random.randn(x,y) \ for x,y in zi

  • 解决pycharm的Python console不能调试当前程序的问题

    使用python时,程序能运行,但是不能调试,找了半天解决方法,最后此操作分分钟奏效. 两种方法: 方法一:选中要运行的代码,右键Execute Selection in Console(Alt + Shift + E). 方法二:菜单栏--Run--Edit Configuration--勾选Show command line afterwards. 以上这篇解决pycharm的Python console不能调试当前程序的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多

随机推荐