Use the Glimpse beta with asp.net web forms

This post is about Glimpse 0.81 which is obsolete, check this post about newer versions.

If you are not using MVC yet, but like to use some of the goodness of glimpse in your web forms sites, read on.

Requirements for the 0.81 version of Glimpse:

- A web forms site using ASP.NET 4
- jquery.js included on any page you want to glimpse into.
- MVC 3 (http://www.asp.net/mvc/mvc3)

Using nuget to add glimpse to your site in Visual Studio

Get nuget at http://nuget.codeplex.com/.

Use the nuget Package Manager Console,

or right click on your site and use the 'Add Library Package Reference'.

Install-Package Glimpse

in the console, or search for Glimpse in the GUI. The glimpse page on the nuget gallery is at
http://nuget.org/List/Packages/Glimpse

Manually add glimpse without Visual Studio

If you can't or don't want to install nuget, you can add Glimpse to your site manually.

Open the url http://packages.nuget.org/v1/Package/Download/Glimpse/0.81 to download the package.
Rename the .nupkg file to .zip and open it, navigate into /lib/net40 and copy the Glimpse.Net.dll
into the bin directory of your site.

Now open your web.config,

add or integrate the config section at the very top of the file (just after <configuration>)

<configSections>
    <section name="glimpse" type="Glimpse.Net.Configuration.GlimpseConfiguration" />
</configSections>

<glimpse on="true" saveRequestCount="5">
    <ipAddresses>
        <add address="127.0.0.1" /><!--IPv4-->
        <add address="::1" /><!--IPv6-->
    </ipAddresses>
    <contentTypes>
        <add contentType="text/html"/>
    </contentTypes>
</glimpse>

The Client Site Component

For MVC the required client site component is accessed through a route to /glimpse/glimpseclient.js
You could do the same in web forms, but you could also just drop the js file into that location.

Get the JavaScript file from https://github.com/Glimpse/Glimpse/blob/master/source/Glimpse.Net/glimpseClient.js
and save it into /glimpse/glimpseclient.js in your site.

You also want to grab the image at https://github.com/Glimpse/Glimpse/blob/master/source/Glimpse.Net/glimpseSprite.png
and save it as /glimpse/glimpseSprite.png.

Now enable glimpse by opening /glimpse/config on your site and click the 'Turn Glimpse On' button.

Any aspx page that has jQuery included, you should now see the glimpse button in the lower right corner, click it to open the glimpse panel.

Optional:
In your web.config add

<pluginBlacklist>
    <add plugin="Glimpse.Net.Plugin.Mvc.MetaData"/>
    <add plugin="Glimpse.Net.Plugin.Mvc.Binders"/>
    <add plugin="Glimpse.Net.Plugin.Mvc.Execution"/>
    <add plugin="Glimpse.Net.Plugin.Mvc.Routes"/>
    <add plugin="Glimpse.Net.Plugin.Mvc.Views"/>
</pluginBlacklist>

to the <glimpse section, this will hide the MVC extensions which are useless for web forms.

Troubleshooting:

On one of my sites, the /glimpse/config page did not work, that was because I had Firefox's 'Content-Security-Policy' enabled
on the site which does not allow JavaScript to be executed within a html page. Make sure to turn that off for glimpse.

How does it all work?

I asked myself, how the additional glimpse JavaScript gets onto my page, after all I did not make any changes to the web.config
except for the configuration. I look at the source of glimpse reveals that they are using the new ASP.NET 4 feature 'PreApplicationStartMethod'
to add a http module to a site by just dropping an assembly into the bin directory. No changes to the web.config files are required.
Learn more about this at  nikhilk.net