Click here to Skip to main content
14,163,348 members
Click here to Skip to main content
Add your own
alternative version

Stats

42.2K views
61 bookmarked
Posted 7 Nov 2015
Licenced CPOL

Glimpse Part 1 - Easy Debugging ASP.NET MVC Application

, 7 Jan 2016
Rate this:
Please Sign up or sign in to vote.
This tip explains the step by step approach how we can use Glimpse for easy debugging of the ASP.NET MVC application.

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

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:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


You may also be interested in...

Pro

Comments and Discussions

 
QuestionVery nice explanation Pin
RNA Team24-Aug-16 20:11
memberRNA Team24-Aug-16 20:11 
GeneralGood Pin
Sandeep Singh Shekhawat21-Dec-15 17:31
professionalSandeep Singh Shekhawat21-Dec-15 17:31 
QuestionHave you tried this tool with angular or Web API? Pin
Raju_B25-Nov-15 4:17
memberRaju_B25-Nov-15 4:17 
AnswerRe: Yes,Glimpse also works with angular or Web API. Pin
Rakhi Shrivastava28-Nov-15 19:19
professionalRakhi Shrivastava28-Nov-15 19:19 
GeneralNice Article Pin
Sujeet Bhujbal24-Nov-15 19:16
memberSujeet Bhujbal24-Nov-15 19:16 
GeneralMy vote of 5 Pin
ipec.anilgupta23-Nov-15 1:49
memberipec.anilgupta23-Nov-15 1:49 
GeneralRe: My vote of 5 Pin
Rakhi Shrivastava23-Nov-15 17:01
professionalRakhi Shrivastava23-Nov-15 17:01 
Question5 out of 5 Pin
Shyam S Singh22-Nov-15 7:52
memberShyam S Singh22-Nov-15 7:52 
AnswerRe: 5 out of 5 Pin
Rakhi Shrivastava23-Nov-15 16:51
professionalRakhi Shrivastava23-Nov-15 16:51 
GeneralMy vote of 5 Pin
harsh.aspdotnet19-Nov-15 23:30
memberharsh.aspdotnet19-Nov-15 23:30 
GeneralRe: My vote of 5 Pin
Rakhi Shrivastava23-Nov-15 16:59
professionalRakhi Shrivastava23-Nov-15 16:59 
GeneralMy vote of 5 Pin
Santhakumar M14-Nov-15 4:27
professionalSanthakumar M14-Nov-15 4:27 
GeneralRe: My vote of 5 Pin
Rakhi Shrivastava23-Nov-15 16:58
professionalRakhi Shrivastava23-Nov-15 16:58 
GeneralRe: My vote of 5 Pin
Santhakumar M23-Nov-15 17:37
professionalSanthakumar M23-Nov-15 17:37 
SuggestionIntroducing Glimpse in VS2012 MVC4 Pin
Rakhi Shrivastava14-Nov-15 2:07
professionalRakhi Shrivastava14-Nov-15 2:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190518.1 | Last Updated 7 Jan 2016
Article Copyright 2015 by Rakhi Shrivastava
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid