mrkt 的程式學習筆記: ASP.NET MVC 使用Glimpse監測網站的一舉一動 1

之前有介紹一個可以即時監測網戰後端每個處理的處理時間的監測套件「MiniProfiler」，如果說要連帶要監測前後端的每一像細節的話，那麼MiniProfiler可能就沒有辦法，而且MiniProfiler是無法遠端做監測的動作，MiniProfiler只能夠監測本地端的動作，所以MiniProfier比較適合開發期間使用。

而在開發ASP.NET WebFrom的時後，如果想要追蹤每個頁面的執行狀況與效能的話，其實是可以使用「Trace」功能，如此一來就可以在每個頁面的下方顯示頁面執行時的完整詳細資訊，包括前端傳送的Http Request、所有的Session、Cookie等，對於開發時期來說，這些資訊可以幫助我們在除錯時候可以掌握確切的資訊。

然而系統上線之後，Trace功能勢必要關閉，而單靠ELMAH記錄錯誤訊息也無法完全掌握，因為有的時候執行正常並不表示功能正常，例如執行時間過慢、路徑錯誤等，所以接下來就來介紹「Glimpse」，除了具有Trace的功能外，也可以結合Forms Authentication的登入認證，讓我們在系統上線之後，一樣可以即時讓開發人員追蹤頁面執行的各項資訊。

Glimpse

http://getglimpse.com/

http://nuget.org/List/Packages/Glimpse

What is Glimpse
At its core Glimpse allows you to debug your web site or web service right in the browser. Glimpse allows you to "Glimpse" into what's going on in your web server. In other words what Firebug is to debugging your client side code, Glimpse is to debugging your server within the client.
Fundamentally Glimpse is made up of 3 different parts, all of which are extensible and customizable for any platform:

Glimpse Server Modules – Code on the web server that collects meta data and sends it to the client.
Glimpse Protocol – A specification of that meta data.
Glimpse Client Side Viewer – Code on the web page or in the browser that takes the meta data from the server and displays it to the user.

在官網上的說明，目前Glimpse支援ASP.NET WebForm與ASP.NET MVC，至於以後會再支援PHP, Ruby on Rails與Node.js。

Glimpse有著類似Firefox的Firebug的外觀，可以在執行功能後隨時的展開或是收闔，但是Glimpse不是任何瀏覽器的套件，Glimpse是一個依據jQuery所建立的plugin，所以你的網站必須要引入使用jQuery，而瀏覽器則是不限定，根據官網所顯示的資訊，Glimpse可以支援多種的瀏覽器：Chrome 12, Firefox 4 and IE9。

另外目前Glimpse還是在beta版，而且只有支援.NET Framework 4.0，所以其他版本的.NET Framework是無法正常運作，ASP.NET MVC版本只有支援3.0，如果你的機器上面有安裝.NET Framework 4.0，而你的網站是用ASP.NET MVC 2開發，如果GAC上面可以找到MVC3的話，或許ASP.NET MVC2的網站是可以使用Glimpse。

我測試到目前為止，在遇到資料列表的頁面時，有Turn On Glimpse的情況下，執行列表頁面會相當久，在IE瀏覽器下甚至會引發「執行時間過長」的警示，而Firefox也是會顯示執行時間過久而詢問是否繼續執行的警示，而找遍各種網站資料都沒有人有類似的問題發生，所以我也只能期待他新版本不會有此問題的出現。

接著我們就來操演一次，如何在VS2010中使用NuGet魚網站專案中安裝Glimpse。

使用NuGet安裝Glimpse

NuGet上面的Glimpse package目前只有支援ASP.NET MVC3，

選擇安裝「Glimpase for ASP.NET MVC3 (Beta)」（安裝完成後，也會一併安裝Glimpse for ASP.NET Beta()），

安裝完成之後會在方案中新建一個資料夾「App_Readme」，裡面有兩個Readme檔案，

其中「glimpse.readme.txt」的檔案內容裡有詳細說明，說明如何修改Web.Config以及功能介紹。

透過NugGet安裝Glimpse，在Web.Config加了哪些東西

基本上安裝完成後就可以使用了，但在使用之前，先來看看Web.Config有多了什麼，

在一開是的configSections中增加了「glimpse」的設定，

然後在system.web的httpModules與httpHandlers都有增加，另外在system.webServer的modules與handlers中也有增加，

而在Web.Config的最後面有多了一個glimpse的section，在這個Section中，可以針對不同的情境去改變設定，

預設的設定是enabled=”true”，預設是把Glimpse的功能給開啟，

在glimpse.readme.txt中就有說明，glimpse的Section如何做設定：

The following configuration values are allowed for Glimpse in your web.config:
<glimpse enabled="true" 
  requestLimit="5" 
  loggingEnabled="false"
  ipForwardingEnabled="false"
  cacheEnabled="true"> 
  <!-- 
    set enabled to false to completely turn off Glimpse. 
    requestLimit specifies the max number of requests Glimpse will save. 
    enableLogging (false by default) if you experience problems with Glimpse 
    ipForwardingEnabled (false by default) will force Glimpse to validate IP addresses based on the value in the HTTP_X_FORWARDED_FOR header. Useful if your server is behind a proxy or load balancer.
    cacheEnabled (true by default) Glimpse will tell browsers to cache static files by default
  -->
    <ipAddresses> <!-- List of IP addresses allowed to get Glimpse data. Optional. localhost (IPv4 & IPv6) by default -->
        <add address="127.0.0.1" />
        <add address="::1" />
    </ipAddresses>
    <contentTypes><!-- List of content types Glimpse will provide data for. Optional  text/html and application/json by default -->
        <add contentType="text/html"/>
    </contentTypes>
    <pluginBlacklist><!-- List of plugins for Glimpse to ignore. Optional. By default all plugins will load -->
    <add plugin="Glimpse.Core.Plugin.Request"/>
    <add plugin="Glimpse.Core.Plugin.MetaData"/>
  </pluginBlacklist>
  <environments><!-- List of environments your application runs in. Used for the new environment switcher feature. Optional. By default environment information will no be shown -->
        <add name="Dev" authority="localhost:33333" />
        <add name="Prod" authority="getglimpse.com" />
    </environments>
  <urlBlacklist><!-- Glimpse will ignore all requests made to URI's that match any regular expression in this list. Optional. By default all URI's will be considered for Glimpse inspection. -->
    <add url="{regex}"/>
    <add url="{regex}"/>
  </urlBlacklist>
</glimpse>

在這邊，我們先不要更改任何的設定。

啟用「Glimpse」功能

要開啟使用Glimpse相當簡單，只要輸入「http://你的網站網址/Glimpse.axd」就可以了，就會進入到下面的頁面，

然後點擊「Turn Glimpse On」就可以開啟功能，打開後就可以看到上方會出現提示，

接著回到網站的頁面，可以看到頁面的右下角出現一個圖示，直接點擊圖示，

點擊後，網頁下方就會顯示一個區塊，裡面就是Glimpse所提供追蹤的功能，

Ajax

Config

Enviroment

Execution

MetaData

Remote

Request

Routes

Server

Trace

Views

其中會比較常用的有Ajax, Config, Enviroment, Execution, Request, Server, Trace, Views。

Glimpse可以立即追蹤網頁中的AJAX資訊，

而在Trace的視窗中，我們可以在程式之中去使用以下的語法，在Trace視窗中顯示追蹤的資訊，

Trace.Write("test");
Trace.TraceError("test");
Trace.TraceInformation("test");
Trace.TraceWarning("test");
GlimpseTrace.Info("GlimpseTrace Info");
GlimpseTrace.Warn("GlimpseTrace Warn");
GlimpseTrace.Error("GlimpseTrace Error");
GlimpseTrace.Fail("GlimpseTrace Fail");

而GlimpseTrace.Time()則是可以方便讓開發者知道一個區間的執行所花費時間，


public ActionResult Index()
{
    using (GlimpseTrace.Time("It took {t} milliseconds to Show Home-Index"))
    {
        Trace.Write("test");
        Trace.TraceError("test");
        Trace.TraceInformation("test");
        Trace.TraceWarning("test");
        GlimpseTrace.Info("GlimpseTrace Info");
        GlimpseTrace.Warn("GlimpseTrace Warn");
        GlimpseTrace.Error("GlimpseTrace Error");
        GlimpseTrace.Fail("GlimpseTrace Fail");
        return View();
    }
}