在Programer的世界中也是這樣，除了電腦硬體、開發平台以外
方便的套件軟體也是不可缺少的！
前情提要
本篇文章以Google Chrome瀏覽器為例，並會用到一些ng的概念。
為什麼要用套件？不能直接debug嗎？
這要從前後端的架構說起，因為前端（js與html）程式是客戶端（Client）程式，並非伺服器端（Server）程式，客戶端程式會在使用者瀏覽頁面之前，跟伺服器發出請求（request）載入所需要的資源（html、js），而這些前端程式都會在使用者的瀏覽器（browser）上運作（註1），所以當然不能在開發平台（VisualStudio、Sublime、Atom...）上面debug囉！
註1：也因為是在瀏覽器上運行，所以前端程式才會有瀏覽器相容性的問題！
前端當然可以debug，但是是透過瀏覽器來debug，相信寫過javascript或是jQuery的開發人員一定很熟悉，利用瀏覽器的「開發人員工具（Developer Tools）」，按下快捷鍵F12就會打開這個工具了！（debug並非這篇文章的重點，所以本篇不多著墨）
不debug，我們要怎麼監控畫面上的資料呢？
這就講到了這篇文章的重點「ng-inspector for AngularJS」這個套件
- 官方網站：http://ng-inspector.org/
- 目前支援的瀏覽器：Chrome、Safari、Firefox
（IE Edge套件說2016要支援...到現在好像也是沒消沒息的...）
安裝方法：
- 從Chrome的擴充套件找到「ng-inspector for AngularJS」並安裝！
- 也可以從連結點過去安裝，連結請點「我」←←←
ng-inspector for AngularJS使用方法
很簡單！
「就在你要使用的頁面，點一下ng-inspector的icon就對了！」
不要懷疑就是這麼簡單！！！
不要懷疑就是這麼簡單！！！
不要懷疑就是這麼簡單！！！（很簡單所以說三次！？）
如果「頁面有AngularJs」，那麼就會出現（這邊以Angular的官方網站為例）
由上圖，我們可以知道
ng-app底下的所有東西全部都會再裡面，包含controller與directive都會列出來，而且其中的變數（variable）、物件（object）與方法（function）都會列出來，而且是「及時更新」，方便我們在寫程式的時候觀察「變數」或是「物件」的變化，這於開發或是偵錯都是很方便的地方！
官方也有出類似的套件，為什麼不使用官方的呢？
官方的確有出，用法其實也類似，只不過他是隱藏在Chrome的開發者工具中
- 官方套件：AngularJS Batarang
- 官方套件連結，連結請點「我」 ←←←
速度「慢」，尤其開發大系統的時候，速度真的非常慢...
而且開啟此功能需要重新刷新頁面，功能才能運作。
這對於時間寶貴的各位是非常不友善的缺點，所以我們選用「ng-inspector for AngularJS」
總結
講到這邊，我們總結一下「ng-inspector for AngularJS」的優點：- 即時監控所有ng-app底下的東西
- 安裝簡單
- 啟用功能只需要按一個按鈕，沒有其他繁雜步驟
- 啟動速度非常的「快」
- 啟動時不需要刷新頁面
後記
如果你剛好也是開發ng的Programer，那麼我推薦你使用這個套件！這個套件真的是比官方出的好用太多太多太多了～
感謝各位收看～
To Be Continued.