Glimpse Part 1 - Easy Debugging ASP.NET MVC Application

• Download source - 2 MB

Introduction

With increasing business demands, now we develop very large and complex ASP.NET projects that take more time to compile and debug. And whenever QA reports any issue, we need to compile and debug the code with exact scenario. Then only, we figure out the debugging information like which route, controller, model, view, class and DB queries with parameter values that help us in finding the root cause of an issue.

Life will be easy if we get all this debugging information on the page itself without any extra effort like debugging. For making it possible, we have Glimpse that helps us by providing this debugging information at runtime on the page itself and reducing our debugging time. Glimpse can be easily introduced into our application.

Glimpse is very helpful to get debugging information as well as performance detail.

Here, I explain step by step, how we can use Glimpse into our application.

Contents

1. What is Glimpse?
2. How to setup Glimpse?
3. How to enable/disable Glimpse?
4. How to use Glimpse?
5. Glimpse Tabs
6. Glimpse Custom Configuration

1. What is Glimpse?

• Glimpse is a diagnostic platform of web applications and provides the detailed debugging information on page like: Routing, Views, Controller, ModelBinding with properties, database queries with parameter values, Configuration, Execution information.
• Glimpse can be setup easily into a web application through the nuget.
• Glimpse provides a detailed server side view while other available tools (Fiddler and the F-12 development tools) only provide a client side view.
• Glimpse can be used in production environment also and it can be enabled or disabled based on custom configuration.
• Glimpse can be used for ASP.NET Web form as well as ASP.NET MVC application.

2. How to Setup Glimpse

Download and install Glimpse into your application as per MVC version.

Glimpse can be installed in two ways, either by package manager console command or by Manage Nugget Package as below: For example: here we do it for MVC5 in Visual Studio 2013.

Open Manage Nuget Packages and search for Glimpse and install the below packages:

Search “Glimpse” and install Glimpse MVC5.

Search “Glimpse.ef” and install Glimpse EF6.

When you install Glimpse into your MVC project:

It adds the following glimpse references into application:

• Glimpse.Mvc5
• Glimpse.AspNet
• Glimpse (Core)
• Glimpse.ADO
• Glimpse.EF6

It adds minimal configuration required to your Web.Config file.

• Definition for custom configuration node glimpse:
  XML

  <configSections>
    <section name="glimpse" type="Glimpse.Core.Configuration.Section, Glimpse.Core" />
  </configSections>

• Define HTTP module and HTTP handler in system.web node:
  XML

  <httpModules>
    <add name="Glimpse" type="Glimpse.AspNet.HttpModule, Glimpse.AspNet" />
  </httpModules>
  <httpHandlers>
    <add path="glimpse.axd" verb="GET" 
    type="Glimpse.AspNet.HttpHandler, Glimpse.AspNet" />
  </httpHandlers>

• Register HTTP module and HTTP handler in system.webserver node:
  XML

  <system.webServer>
    <modules>
      <add name="Glimpse" type="Glimpse.AspNet.HttpModule, 
      Glimpse.AspNet" preCondition="integratedMode" />
    </modules>
    <handlers>
      <add name="Glimpse" path="glimpse.axd" 
      verb="GET" type="Glimpse.AspNet.HttpHandler, 
      Glimpse.AspNet" preCondition="integratedMode" />
    </handlers>
  </system.webServer>

• Add glimpse node at the end which can be used to configure Glimpse behavior as per your needs:
  XML

  <glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
  </glimpse>

• We can add Glimpse as per the MVC and EF version of our application. For MVC4, we can use the below console command to install Glimpse.

PM> Install-Package Glimpse.MVC4
PM> Install-Package Glimpse.EF5

3. Enable/Disable Glimpse for Application

• Once Glimpse is installed to your project and when you run your application, then Glimpse plugin does not show up because it is disabled by default.
• A Glimpse can be enabled/disabled by using the Turn ON/OFF button available on Glimpse.axd page as below and going through the URL: http://[your-url]/Glimpse.axd/.

4. How to Use Glimpse

• After enabling Glimpse in application, Glimpse symbol (g) is shown at the bottom of the page.

  

• By clicking this g symbol, the complete Glimpse Panel is displayed and it contains different Glimpse tabs which provide the Front-end to backend information.

  

5. Glimpse Tabs

• Configuration Tab: It gives details about web.config entries, the application settings, the connection strings used, Web Authentication modes, the custom errors mode, Default redirect page, the Http handlers and Http Modules.

  

  Here, we can see all the configuration details.

• Routes Tab: The Routes tab shows the routes of the web application, along with default values and constraints. The matched route is highlighted for convenience.

  

  Here, we can see how routes are defined and which route is being executed.

• Execution Tab: The Execution tab shows the ASP.NET MVC execution pipeline of actions, action results and action filters (including child actions) required to respond to the HTTP request.

  

  Here, we can see execution sequence of actions.

• SQL Tab: The SQL tab displays the DB query executed on this page.

  

  Here, we can see DB query detail with parameters values 1000.

• Trace Tab: The Trace tab shows any messages traced to System.Diagnostics.Trace or System.Diagnostics.Debug during the lifetime of the HTTP request. Glimpse automatically displays trace statements, eliminating the headache of digging through log files. Popular logging frameworks can be integrated with some slight configuration as well.

  

  Here, we can see the trace messages if we have used Trace/Debug into page code.

• Request Tab: The Request tab shows basic HTTP request information as the server received it. Client-side web debuggers (such as FireBug) often show similar data, but as the browser sent it.

  Here, we can see the actual request.

• Session Tab: The Session tab shows the data that is associated with the current requestor's session store.

  

  Here, we can see the session information if we have used session.

• Views Tab: The Views tab displays all calls made to configured View Engine(s) and View(s).

  

• Model Binding Tab: The Model Binding tab visualizes the ASP.NET MVC model binding sub-system, displaying information about the model binder(s) used for a HTTP request.
• Metadata Tab: The Metadata tab shows the model metadata that ASP.NET MVC has used to display the view for the HTTP request.

6. Configuring Glimpse

1. We can hide any particular tab in glimpse panel by adding the below code for example: Cache Tab
   XML

   <glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
       <tabs>
           <ignoredTypes>
            <add type="Glimpse.AspNet.Tab.Cache, Glimpse.AspNet "/>
   
          </ignoredTypes>
       </tabs>
   </glimpse>

2. Glimpse can be disabled for specific pages by "uris" as below:
   XML

   <glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
   
   <runtimePolicies>
   <uris>
         <!--<add regex="/Employee/EmployeeAdd"/> -->
           <add regex=".*/Employee/*.*"/> 
       </uris>
   </runtimePolicies>
   </glimpse>

   Here, Glimpse will not work for Employee controller.

3. Glimpse can be enabled permanently by the below code and then "Turn Off" option on "Glimpse.axd" page will not work for disabling it.
   XML

   <glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
         <runtimePolicies>
          <ignoredTypes>
            <add type="Glimpse.Core.Policy.ControlCookiePolicy, Glimpse.Core"/>
         </ignoredTypes>
        </runtimePolicies>
   </glimpse>

4. Glimpse can be disabled permanently as below code and then "Glimpse.axd" page will not be available to enable/disable it.
   XML

   <glimpse defaultRuntimePolicy="Off" endpointBaseUri="~/Glimpse.axd">

Note

1. Glimpse can be introduced as per the MVC and EF version of our application.

   Such as VS2012 MVC4 application, we can install Glimpse using console command as below:

   PM> Install-Package Glimpse.MVC4
   PM> Install-Package Glimpse.EF5

2. Glimpse also supports WebAPI calls.

   Glimpse History tab and Ajax tab also capture webapi calls using Ajax. And History tab captures the angularjs webapi calls.

   

Summary

We can set up Glimpse in our development and it can be disabled easily in PROD if not required. We can also configure Glimpse not to work for specific pages based on Uris. By using Glimpse, we can get debugging information of running application as per configuration.

You can download SampleGlimpseApp.zip of the Sample application source code with database backup and run to see Glimpse working.

History

This is Glimpse Part 1 and in Glimpse Part 2 - Performance Profiler, I've explained how Glimpse can be used as performance profiler.

You can also have a look at my other post:

• http://www.codeproject.com/Articles/1052064/Tips-Optimize-ASP-NET-MVC-Application-Performance