码迷,mamicode.com
首页 > 移动开发 > 详细

[Angular 2] How To Debug An Angular 2 Application - Debugging via Augury or the Console

时间:2016-09-20 06:47:48      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

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

 

[Angular 2] How To Debug An Angular 2 Application - Debugging via Augury or the Console

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5887318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!