Easy Debugging ASP.NET MVC Application.

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 below 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:
  
  

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

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

  <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:
  
  

  <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:
  
  

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

• We can add Glimpse as per the MVC and EF versionof our application.For MVC4 we can use 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 complete Glimpse Panel is displayed and it contains different Glimpse tabs which provide the Front-end to backend info.

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 orSystem.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
   
   

   <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:
   
   

   <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.
   
   

   <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.
   
   

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