zoukankan      html  css  js  c++  java
  • 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等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿


  • 相关阅读:
    2015.10.9js(页面坐标)
    2015.8.2js-19(完美运动框架)
    2015.7.12js-11(DOM基础)
    2015.7.7js-07-2(基础)
    2015.7.11js-10(无缝滚动)
    2015.7.10js-07(简单时间)
    2015.7.8js-05(简单日历)
    2015-7.7森林探秘季
    jquery scroll()滚动条事件
    资源(127.0.0.1)处于联机状态,但未对连接尝试做出反应
  • 原文地址:https://www.cnblogs.com/LVBingo/p/6732423.html
Copyright © 2011-2022 走看看