使用Chrome瀏覽器調試AngularJS應用的方法_AngularJS

通過一行簡單的JS程序訪問頁面中任何作用域（甚至是隔離的作用域！）：

對于隔離作用域：

這里用`targetNode`作為HTML節點的引用。你可以非常輕松的通過`document.querySelector()`來創建一個`targetNode`

2：查看作用域樹

有些時候，我們需要查看頁面中作用域層次來有效的調試我們的應用。AngularJS Batarang正是我們需要的一款Chrome瀏覽器的擴展，可以展示當前作用域層次，并具有其他非常有用的特性。

3： 抓取任何服務

無論ngApp在哪里定義，我們都可以使用注入器功能來抓取任何的服務的引用（如果使用angular的bootstrap方法，則可以手動抓取$rootElement）：

然后我們就可以對該服務進行調用，就像我們可以將服務注入一樣。

4: 訪問控制器使用指令

一些指令定義了一個擁有某些額外（通常是分享）功能的控制器。為了從控制臺訪問一個給定指令的控制器實例，只需使用 controller() 方法：

最后一種做法更高級并且不常用。
5: Chrome 控制臺特性

Chrome瀏覽器的控制臺有一堆不錯的捷徑 來調試瀏覽器應用。這是一些Angular開發中最好的做法：

感謝 @zgohr 提供這種方法!

結論

通過幾個簡單的技巧，我們可以訪問頁面任何作用域中的數據，查看作用域層次結構，注入服務和控制指令。

所以下一次，如果你想稍微進行調整，檢查自己的工作或者通過控制臺控制AngularJS一個用，我希望你能記住這些命令，并且能做到像我一樣覺得他們非常實用！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com