開發網站的最大課題，往往是在上線之後才開始，原本在開發環境中執行的好好的網站，一到了正式環境卻跑的異常的緩慢，SQL的查詢遇到大量資料時的表現不如預期等等，都很有可能是我們在線上環境才會發生的情況，如果在線上環境沒有開發工具的幫忙，我們除了依靠Log之外，還有沒有什麼方法可以幫助我們調校網站呢? 今天要介紹的Glimpse就是其中之一，它可以讓我們透過外掛的方式，了解網站運行時的即時狀態，更提供了許多Library的PlugIn來幫助我們找出問題發生的原因！
大家可以從Github ApiSample - Tag Day18開始今天的練習

※安裝Glimpse
有了Nuget之後，幾乎安裝大部分的Library都快要等同於one click install了！今天也是使用Nuget來安裝Glimpse

1. 使用Nuget安裝Glimpse.MVC4
   
2. 安裝完之後還會很貼心的告訴你哪些相關的套件不是最新版本
   
3. 執行網站，進行/Glimpse.axd，右上角三個功能是bookmarklets，我們可以拖曳到書籤列方便我們隨時使用。在這邊點選Turn Glimpse On
   
4. 回到我們的Api測試頁面，可以看到右下角多出來非常酷炫的StatusBar，滑鼠移上去還可以看到不同的資訊，代表我們安裝成功囉！
   

※Glimpse功能展示
我們可以點擊最右下角的圖示，來打開Glimpse的資訊視窗

1. 在Configuation視窗可以看到系統目前AppSetting和ConntionString的資料，這可以很方便我們判斷線上環境的設定是否有吃到正確的資料
   
2. Enviroment則是顯示了目前的系統資訊、IIS資訊和.Net Framework版本等等與系統環境相關的資訊
   
3. Execution包含了Asp.Net MVC執行的狀況，包含經過了哪些ActionFilter，以及執行的方法，我們自行擴充的方法執行順序都可以在這裡找到。
   
4. Request中我們可以看到Request包含的內容
   
5. Route是相當好用的功能之一，我們可以在這邊看到目前的Url是符合哪一個Routing
   
6. TimeLine中我們可以看到MVC中每一個環節執行的時間
   
7. View中我們可以看到View執行的資訊
   
8. Ajax可以看到在這網頁中所執行的所有Ajax Request，甚至可以針對單一Ajax點擊Inspect，如此一來剛剛的所有Tab就會顯示該Ajax的詳細資訊，讓我們做更進一步的追蹤
   

※使用TraceSource在Glimpse顯示記錄
TraceSource是.Net Framework中原生的追蹤類別，它可以幫助我們輸出系統中的使用訊息，並可透過Config的設定選則訊息輸出的方式，而Glimpse也提供了TraceListener讓TraceSource可以在程式執行時輸出訊息到Glimpse中

1. 修改ProductController，加入TraceSource

       public class ProductController : JsonNetController
       {
           private TraceSource trace = new TraceSource("Glimpse");            
   
           [AuthorizeByToken(Roles = "Administrator")]
           public ActionResult GetProductByCategory(int id)
           {            
               trace.TraceEvent(TraceEventType.Start, 0, "GetProductByCategory -{0}", id);
               trace.TraceEvent(TraceEventType.Warning, 0, "Trying to get product info...");
   
               this.Logger.Debug("Execute GetProductByCategory - {0}", id);
   
               var result = this.ProductService.GetProductByCategoryId(id);
   
               trace.TraceEvent(TraceEventType.Stop, 0, "GetProductByCategory -{0}", id);
   
               return Json(result, JsonRequestBehavior.AllowGet);
           }
       }
   

2. 修改web.config，讓TraceSource輸入到Glimpse

       <system.diagnostics>
         <sources>
           <source name="Glimpse" switchName="sourceSwitch" switchType="System.Diagnostics.SourceSwitch">
             <listeners>
               <add name="GlimpseListener"/>
             </listeners>
           </source>
         </sources>
         <switches>
           <add name="sourceSwitch" value="all"/>
         </switches>
         <sharedListeners>
           <add name="GlimpseListener" type="Glimpse.Core.TraceListener, Glimpse.Core"/>
         </sharedListeners>
       </system.diagnostics>
   

3. 我們Inspect /Product/GetProductByCategory，可以在Trace頁籤中看到記錄成功的顯示
   

※追蹤EntityFramework的執行狀況
Glimpse好用的另外一個優點就是他支援相當多的Library，我們還可以使用Glimpse.EF來追蹤Entity Framework產生的SQL，甚至觀察connection和command的執行時間等等狀況

1. 使用Nuget安裝Glimpse.EF
   
2. 一樣可以看到版本相關的資訊
   
3. 回到網頁，我們同樣的Inspect /Product/GetProductByCategory，可以看到多出了Sql Tab，並且能在裡面直接看到EntityFramework產生的SQL語句
   
4. 而在Timeline中也能夠看到Connection和Command的執行狀況
   

※本日小結
Glimpse除了以上的功能介紹之外，還有提供像Glimpse.Nlog、Glimpse.Autofac等等其他好用的Library，如果真得不夠使用也可以自己擴充自己需要的Tab，藉由Glimpse提供的資訊，我們要了解線上網站的實際情況似乎就不再是那麼的困難，也可以幫助我們直接比較修改程式碼之後使用狀況，讓網站更加的順暢好用！關於今天的內容，歡迎大家一起討論 ^_^