zoukankan      html  css  js  c++  java
  • [Angular 2] How To Debug An Angular 2 Application

    In this lesson we will learn several ways to debug an Angular 2 application, including by using Augury and the console. This is especially useful in situations (typically in enterprise development) where we are not administrators on our machine and don't have Chrome available, our we do have it but are forbidden from installing Chrome extensions.

    Select heroes component in console:

    Then if you type $0 in console, it will print out current component:

    This is actually get DOMElement, what we want is JS object, then we can programme somthing on it.

    Todo this, we need to use one comand to get the component instance:

    ng.probe($0).componentInstance  // get component instance

    Now we get the object, lets try to change the Hero which id = 1, change the name to "Superman".

    We changed value in console, but it doesn't refect on UI. This is because Angular 2 Change detection.

    We need to trigger it by:

    ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges() // trigger the change detection

    Once we run it, the UI will change.

    But doing this is lots of work, we can use Augury. You can install it from Chrome extension.

    Then you can get a more user friendly interface:

    You can chang value and it will immdeticlly reflect on the interface.

    -----------------------

    If you want to check the class if componet use, you can do:

    $0.classList
  • 相关阅读:
    bzoj 4017: 小Q的无敌异或
    [TJOI2014] Alice and Bob
    [TJOI2014] 上升子序列
    bzoj 3261: 最大异或和
    bzoj3087: Coci2009 misolovke
    bzoj3521: [Poi2014]Salad Bar
    bzoj4032: [HEOI2015]最短不公共子串
    bzoj1027: [JSOI2007]合金
    bzoj4637: 期望
    bzoj3919: [Baltic2014]portals
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5887318.html
Copyright © 2011-2022 走看看