Debug ASP.NET MVC application with Glimpse

Standard

Introduction

For debugging and diagnostic information for ASP.NET apps, Glimpse is a NuGet packages that provides detailed performance,  It is fast, super-light and serve developer with best visual display for all performance metrices. It helps developer to debugg performance of asp.net application through data access layer to presentation layer, debugging your ajax call is a plus feature of this extension. You dont need to read severl manual pages in order to use this extension as compare to fiddler 🙂

Background

The best part of Glimpse is to debug and analyze performane of all server side functionality as for client side we have firebug, fiddler and F-12 development tool.

Using the code

For tutorial, I am going to use sample Contoso University Project available at MSDN.

1. Open ContosoUniversity.sln in Visual Studio, It is implemented using asp.net MVC and Entity Framework 6

2. Click on Manage NuGet Packages in Project Tab

3a. NuGet will look for your project configuration and will recommend available glimpse extensions, type glimpse in search box

3b. You may perform same function through NuGet Package Manager Console

Console Command For MVC5: Install-Package Glimpse.MVC5
Console Command For MVC4: Install-Package Glimpse.MVC4
Console Command For MVC3: Install-Package Glimpse.MVC3
Console Command For WebForms: Install-Package Glimpse.Webforms

Console Command For ADO.NET: Install-Package Glimpse.Ado
Console Command For Entity Framework 6: Install-Package Glimpse.EF6
Console Command For Entity Framework 5: Install-Package Glimpse.EF5
Console Command For Entity Framework 4 or 3: Install-Package Glimpse.EF43

If you are installing first time, it will automatically include Glimpse.AspNet and Glimspe.Core in order to resolve dependency.

4. Glimpse refrences will be added in project:

and web.config will be updated as below:

<configuration>
  <configSections>
    <section name="glimpse" type="Glimpse.Core.Configuration.Section, Glimpse.Core" />
  </configSections>
  <system.web>
    <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>
  </system.web>
  <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>
  <glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
  </glimpse>
</configuration>

 

5. Build the project and open view Home/About in browser

6. Type /Glimpse.axd after available URL of your project

7. Click on Turn Glimpse On in order to debugg your application for better performance

8. Glimpse will be available at bottom right of your browser

9. When you hover on HOST section of dashboard, It will show all trvial data about total action time, number of db connections opened, number of quieires served by controller to render this view and much more

10. Click on ‘g’ at the bottom right on toolbar and explore all server side debugging features. Through Glimpse you may go through cache entries.

11. Glimpse will help you out to analyze performance of controller methods by displaying time elapsed for each method of controller.

12. This extension will help developer in displaying all key-values of cookie, parameters of query string, attributes of http header.

13. Best part of Glimpse is to display duration of each sql query under SQL tab.

14. Then comes timeline analysis of execution of each events, this will help developer to look for area of concern in more prominent way.

Points of Interest

There might be chance you are not using entity framework in your project, then for ADO.NET, to retrieve data for the SQL tab, Glimpse attaches itself by providing its own GlimpseDbProviderFactory which wraps the standard ones. This lets it collect information about how you’re using your data connections. If you’re not using an ADO connection that uses the DbProviderFactories, Glimpse won’t collect any data for the SQL tab.

DbProviderFactory factory = DbProviderFactories.GetFactory("System.Data.SqlClient");
            using (var connection = factory.CreateConnection())
            {
                using (var command = factory.CreateCommand())
                {
                    try
                    {
                        connection.ConnectionString = connString;
                        command.Connection = connection;
                        command.CommandType = CommandType.StoredProcedure;
                        command.CommandText = "StoreProcedureName";

                        var parameters = new[]{
                             new SqlParameter(){ ParameterName="@param1", Value = param1 }
                        };
                        command.Parameters.AddRange(parameters);
                        command.CommandTimeout = ConnectionTimeOut;
                        connection.Open();
                        
                        using (var myReader = DbProviderFactories.GetFactory("System.Data.SqlClient").CreateDataAdapter())
                        {
                            //code here
                        }
                        
                    }
                    finally
                    {
                        if (command.Connection.State == ConnectionState.Open)
                            command.Connection.Close();
                    }
                }
            }

Code available @Github: https://github.com/m-hassan-tariq/GlimpseforMVCContosoUniversity

History

Vesrion 1.0

About the Author

Muhammad Hassan Tariq

Software Developer TRG/IBEX-Global
Pakistan Pakistan
Advertisements

One thought on “Debug ASP.NET MVC application with Glimpse

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s