愛流浪的小風

技術隨手寫

使用Asp.Net MVC打造Web Api (19) - 使用Glimpse調校網站

| Comments

開發網站的最大課題,往往是在上線之後才開始,原本在開發環境中執行的好好的網站,一到了正式環境卻跑的異常的緩慢,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提供的資訊,我們要了解線上網站的實際情況似乎就不再是那麼的困難,也可以幫助我們直接比較修改程式碼之後使用狀況,讓網站更加的順暢好用!關於今天的內容,歡迎大家一起討論 ^_^

Comments

comments powered by Disqus