【51CTO.com快譯】如果大家對AngularJS還不熟悉，那么可能會在初步創(chuàng)建Web應用時對很多問題感到擔心。而且盡管這可能已經(jīng)是我們所能用到的上手難度***的Web開發(fā)框架之一，但大家仍然需要了解一部分重要技巧，從而更為輕松地搞定適應過程。另外，即使是技術水平***的Web開發(fā)人員也都擁有相當長的AngularJS使用經(jīng)驗。然而，只要我們順利掌握了這些技巧與技能，大家完全能夠以盡可能簡單的方式打造出自己***實用性與卓越性的Web應用。

我們首先要做的就是投入時間來學習這些技能與技巧，并最終將其無縫化接入我們的實際使用。下面就一起來了解該如何踏出***步：

學習并理解與scope相關的一切

這一點之所以如此重要，是因為Angular.js當中的一切都是圍繞著scope所展開。在使用指令與控制器時，Angular.js會創(chuàng)建一套scope結構。我們需要學習如何隔離scope以及特定位置的scope值。大家可以利用.scope方法來訪問Angular.js當中每個元素的scope。Angular.js scope其實非常有趣，但前提是大家已經(jīng)透徹理解了關于它的一切。

下面來看一些非常實用的scope技巧：

•  $($0).scope() 這段代碼可以幫助大家輕松查看與特定元素相關聯(lián)的scope及其全部屬性。
• 繼承自父scope的屬性將不會顯示，但如果大家需要查看，則可以隨時輸入其名稱。
• 要搜索父scope的各屬性，使用$($0).scope().$parent代碼。
• $($0).scope().$root這段代碼旨在查看root代碼的各屬性。
• 如果大家已經(jīng)以隔離scope的方式高亮一條指令，則可以利用$($0).isolateScope()查看其屬性。
• 如果我們在某隔離scope內(nèi)高亮某項元素，則可利用$($0).scope()代碼顯示哪些可用。

關于scope的一切表面上看似乎都不容易理解，不過其實際難度并不高。大家只需要深入掌握其中的幾項要點。而且如果大家在面對特定需求時不知道該怎么做，那么多加嘗試絕對沒有壞處。通過這種方式，我們能夠輕松了解何時該進行怎樣的操作，那么整個開發(fā)過程也將變得更加簡單。

輕松使用Breakpoint

console.log或者調(diào)試器可以算是使用說明，其能夠幫助我們對JavaScript代碼進行隨時調(diào)試。它們非常實用，但并不是必須使用。在這類場景下，大家必須了解關于breakpoint的一切——目前每一款主流瀏覽器的檢查工具中都有提供。

 在breakpoint的幫助下，大家將無需查閱整個循環(huán)即可找到自己需要的位置。

檢查變量來自何處

創(chuàng)建并使用一款利用Angular.js編寫而成的Web應用非常簡單，但該應用可能隨著時間推移而需要持續(xù)演進。在這種情況下，我們可能很難明確了解模板中的某些變量到底來自何處。如果僅僅是某隔離scope當中的一條指令，那么大家肯定能夠輕松找到答案。但在面對著復雜的指令與控制器結構時，我們無疑需要更聰明的方式來追蹤變量來源。

下面是具體實際方式：

• 找到使用該變量的元素，而后檢查其scope。
• 檢查其值，例如利用$($0).scope().foo代碼，其中屬性被稱為“foo”。
• 如果其值已經(jīng)被定義，大家即可據(jù)此得出答案，因為該屬性肯定是來自定義層的控制器或者指令。而如果該值尚未被定義，則可以嘗試DOM中的其它層。只需重復這一過程，答案最終必能顯現(xiàn)。

弄清某些元素為何不會顯示出來

有時候，大家會發(fā)現(xiàn)自己的使用ng-if、ng-switch或者ng-views進行搜索或者檢查時，某些元素不會被顯示出來。這是因為此類指令會以狀態(tài)或者自身所使用路徑為基礎從DOM處整體添加或者移除其內(nèi)容。只要使用ng-show即可解決問題，其能夠通過隱藏是否可見的方式對這些元素進行顯示與隱藏。

在Angular.js當中，注釋將與元素保持在同一位置。

找尋控制器以處理頁面中的特定部分

很多朋友肯定絕對這項任務無甚難度，但必須強調(diào)的是，相當一部分開發(fā)人員早已將其忘在腦后。要想找到負責處理頁面內(nèi)特定部分的控制器，DOM當中的ng-controller屬性將能夠幫上大忙。

對很多人來說，從一套規(guī)模龐大的HTML頁面當中找尋屬性絕非易事。不過這其中是有簡便方法的; 點擊對象元素，而后運行$($0).attr(‘ng-controller’)。如果沒有返回任何結果，那么我們需要點擊父scope并再試一次。

jQuery在這方面也有著重要作用，要想找到與當前位置距離很近的某控制器，大家可以使用以下代碼：

$($0).closest(‘[ng-controller]’).attr(‘ng-controller’)

理解digest周期

$digest在Angular.js當中負責觸發(fā)變更。如果沒有特定代理或者對象制定程序，Angular.js將不會在各對象的屬性發(fā)生變更時接收由其發(fā)出的通知內(nèi)容。有鑒于此，digest周期的作用是檢查各觀察程序并表達其任何變更。也就是說，在運行digest的條件下，Angular.js將隨時了解當前發(fā)生的事件。

而一旦發(fā)生了某些Angular.js未能識別到的事件，例如一條控制臺指令，那么接下來什么都不會發(fā)生，Angular也不會自動啟動digest。在這時，大家必須手動執(zhí)行digest，從而獲得相關更新。

與任何其它編程語言一樣，Angular.js在使用過程中還有有點難度的。但只要能夠掌握其中的技巧與竅門，那么這種難題絕不會持續(xù)太久，而這一點對于每一位下定決心打算學習Angular.js并利用其進行應用程序開發(fā)的朋友而言都非常重要。

原文標題：How to Debug Unfamiliar AngularJS Code

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】