Angular2使用Augury來調試Angular2程序
Augury-Angular專用的chrome 調試插件
如題，在的2016-12-8谷歌開發(fā)者大會上，angular2的leader來給我們演示了angular2的特性，對于已經入門的同學們，已經沒有太多新鮮內容，唯有一個內容讓我為之一震，就是Augury（現(xiàn)在和VUE對比起來，確實可以看出有谷歌支持下angular2會更活躍，我個人認為2年后恐怕VUE無法與之抗衡），跟Angular-CLI一樣，還處于beta階段，也還有很多問題，但是有些地方已經非常方便開發(fā)和調試了，這里看到國內竟然沒有一篇文章介紹Augury,我就先拋磚引玉一下介紹下，讓大家嘗嘗鮮！
Augury安裝
內容和步驟都在這里，非常簡單，就是上chrome 應用商城搜索augury，安裝一下就可以了，就是一個chrome插件。
Augury特性
1 用augury查看component結構
我的angular2應用中，結構非常簡單，就一個主要的AppComponent和一個dashboardComponent
運行應用，打開瀏覽器查看頁面，在開發(fā)者工具中可以看到，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中改掉。本文只是拋磚引玉，具體內容還需自行研究。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
ng-container 是 Angular 2+ 中可用的一個元素,可以作為結構指令的宿主,在本文中,您將探討可以使用 ng-container 解決的場景,文中有相關的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-02-02
DevUI 是一款面向企業(yè)中后臺產品的開源前端解決方案，它倡導沉浸、靈活、至簡的設計價值觀，提倡設計者為真實的需求服務，為多數人的設計，拒絕嘩眾取寵、取悅眼球的設計。如果你正在開發(fā) ToB 的工具類產品，DevUI 將是一個很不錯的選擇！2021-05-05
AngularJS實現(xiàn)的base64編碼與解碼功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的base64編碼與解碼功能,結合實例形式分析了AngularJS字符串base64編碼與解碼操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
本文主要介紹AngularJS 如何在控制臺進行錯誤調試，還不錯，分享給大家，希望給大家做一個參考。2016-06-06
Angular2中constructor和ngOninit的使用講解
這篇文章主要介紹了Angular2中constructor和ngOninit的使用講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了AngularJS中filter的使用實例詳解的相關資料,這里提供實例幫助大家理解掌握，希望能幫助到大家，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了簡述Angular 5 快速入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要給大家介紹了關于Angular中使用MathJax遇到的一些問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友下面來一起學習學習吧。2017-12-12
這篇文章主要介紹了詳解為生產環(huán)境編譯Angular2應用的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了AngularJS實現(xiàn)進度條功能,結合具體完整實例形式分析了AngularJS實現(xiàn)進度條功能的原理、相關知識點與注意事項,需要的朋友可以參考下2017-07-07