What is Glimpse?

 “Providing real time diagnostics & insights to the fingertips of hundreds of thousands of developers daily”
http://getglimpse.com/

Glimpse is an open source collection of NuGet packages which can be used to provide detailed performance and debugging information.  It provides an intuitive UI with detailed view of the data sent and received by the server.
Glimpse is similar to the built in browser developer tools (F12), however the data presented in the developer tools is how the browser sees it.  The key difference is that Glimpse is running on the server.

Getting Started with Glimpse

To get started with Glimpse you will need to install the relevant packages from NuGet depending on the frameworks being used.  For example working on an MVC5 application with Entity Framework the following two commands can be ran from the Package Manager Console in Visual Studio

• Install-Package Glimpse.MVC5
• Install-Package Glimpse.EF5

Installing these packages will automatically update the web.config file to include the necessary Glimpse configuration details.  Once these packages are installed you then need to start your application and navigate to /glimpse.axd where you can turn Glimpse on.

By navigating back to the main site Glimpse will now be running and a Heads Up Display (HUD) will present along the bottom of the screen.

Heads Up Display

The HUD provides a quick view of what is occurring within the current request.  It is split into three different sections:

HTTP

• Displays the length of the request

• Time spent on the “wire” (time spent between the client requesting and the server receiving the request)

• Time spent processing the request

• Finally the time spent by the client receiving and rendering the response.

Host

• Details of what occurred on the server, i.e. controller method called

Ajax

• Number of Ajax requests

• The URL’s requested.

Hovering over each of the individual HUD segments pops up a bigger window displaying some additional information for that segment.

Glimpse Panel

The majority of the useful information is contained within the Glimpse Panel which is organised into a series of tabs, which is determined by the packages installed.  There are four Core Tabs which are part of the Glimpse installation that will always be displayed: Ajax /History/Timeline/Trace

Not all of the tabs may be accessible for each request, for example if the Entity Framework package has been installed there will be a ‘SQL’ tab.  However, this will be disabled if the current request did not make a database request.  In this example the two installed packages were MVC5 and EF5 so the following additional tabs are added to the panel:

ASP.NET MVC5

• Execution

• Model Binding

• Metadata

• Views

Entity Framework

• SQL

Glimpse Tabs

1. Cache
   • Provides an insight into the use of data caching
2. Configuration
   • Displays information from the web.config and machine.config files.
3. Environment
   • Provides information of the server that handled the request

     • Timezone

     • Server Name

     • OS

     • Web Server i.e. IIS version

4. Execution
   • Shows the MVC execution path of actions, action results and action filters that are required to respond to the HTTP Request.
5. Metadata
   • The Metadata tab shows the model metadata that ASP.NET MVC has used to display the view for the HTTP request.
6. Request
   • This tab is similar to the information that you get with the developer tools

   • Important distinction is that this is the request data as received by the server

7. Routes
   • Provides information on the route used
8. SQL
   • This tab is available when a package is installed, e.g. EF6 when you are using Entity Framework
   • The tab is enabled if the currently selected request involved a call to the database

   • Shows the SQL statement executed and if Stored Procedure is called it will display values of any parameters passed in.

   • Useful timing information is also available, indicating the overall length it took as well as breaking it down if multiple queries

9. Server
   • All web server variables available for request.
10. Timeline
    • Troubleshooting performance issues

    • Can be useful as a learning tool for new developers

    • Can switch between hierarchical and classic

    • Clearly indicates any potential bottlenecks in the application.

11. Trace
    • Will display any diagnostic trace or debug information.
12. Views
    • Shows how MVC selects a particular View
    • MVC queries WebFormsViewEngine first and then the RazorViewEngine
    • Successful one highlighted green
13. Ajax
    • Keep track of the ajax calls

    • Use the ‘Inspect’ option to select a particular request and the tabs will update to the relevant data for this request.

14. History
    • Keeps a track of all requested URLs.

    • Similar to Ajax tab, use the ‘Inspect’ option to update each of the tabs for the relevant request.

Hierarchical Timeline View

List of Ajax Calls to Be Inspected

Glimpse Extensions

Glimpse is made up of a number of community maintained plugins and extensions, seventy one at the time of writing.  There is a good possibility that any component that you are working on will have a corresponding Glimpse extension.  For example there are extensions available for

• SignalR
• Azure
• JSON
• Knockout

It is also possible to create your own extension, with some information available on the Glimpse website to help get started.

Glimpse and AngularJS

One issue that was noticed when using Glimpse with an AngularJS application was that the Ajax requests were not showing up in Glimpse.  There are a couple of configurations that can be changed to allow the Ajax requests to be shown.

Glimpse uses the X-Requested-With header to identify AJAX calls and by default this header is not included in AngularJS $http.  It is possible to change the $httpProvider to always return this header.

See Anthony Chu’s article at http://anthonychu.ca/post/getting-angularjs-http-and-web-api-to-work-with-glimpse/ for more details.

Glimpse is a useful addition to a developer’s toolset with its ability to provide insights into your application.  Its uses span a wide range from being a useful training aid to assist junior developers in learning the programmatic flow of an application to being able to drill down into the inner workings of the application to determine the root cause of an issue.  Glimpse can be configured securely to allow it to be enabled/disabled in a production environment which can be invaluable in quickly determining the cause of an issue in production. 

Earlier this year Glimpse announced that their sponsorship had been taken over by Microsoft.  This is likely to lead to deeper integration into Asp.Net, and they have recently announced Glimpse v2 beta.  This new version is built on Asp.Net 5 which means that Glimpse can now be run cross platform on Windows, Linux and OSX.

At Dataworks we enable the perfect hybrid of configurable off the shelf toolsets and custom software development to deliver innovative solutions to match your specific business process requirements. This ensures we are the best at what we do.

If you would like to discuss how we can use our experience and expertise to deliver real benefits to your business please contact us today on 051 878555 or Contact Us.