Glimpse Extension for Toastr | John Papa

John Papa

Evangelist on the loose

Glimpse Extension for Toastr

...

Glimpse.Toastr, a plugin for integrating toastr diagnostics into Glimpse, is now available on NuGet and GitHub.

If you haven’t checked out Glimpse yet, you are missing out. And if you haven’t checked it out recently, then definitely go grab the latest as its new Heads Up Display (HUD) is nothing but awesome-sauce! At a glance it gives you a ton of information to help debug your app. What makes Glimpse stand out is that it works in any browser (it’s not a browser plug-in), shows server or client information, and is constantly being improved.

Glimpse HUD

Glimpse Heads Up Display

In its passive state, Glimpse’s HUD is a toolbar at the bottom of the page that updates dynamically as you interact with your app. It shows you some interesting stats based on the extensions that you enabled. The image above shows the request times for the page to load over HTTP, Ajax calls, and the controllers that fired. It’s active state is enabled when you roll over a specific area. This causes a panel to appear with even more detailed information.

Glimpse is billed as “the server information you need, where you want it”. It is a fantastic tool that provides quick insight into what is going on in your application from the browser. Glimpse has a core library and from there you can add different extensions to help shed light on server features such as Entity Framework, Ninject, ASP.NET MVC, Newtonsoft Json and more. However, Glimpse can do more than just show you server information in the browser.

Glimpse.Toastr

Glimpse extensions rely on a core library that uses a glimpse.axd file in your web app. This is what helps drive the core server side functionality from the server. Then on the client there is a glimpse.js file that helps render the HUD in the browser. I wanted to disconnect the server and try to just use the client piece, so I could use Glimpse on any server to help shed light on client side code. Basically, skip the glimpse.axd on the server and just use glimpse.js with an extension.

I contacted the creators of Glimpse, Nik Molnar and Anthony Vander hoorn, and asked them for some help in getting jump-started with this. Luckily they had already begun thinking about this and it was relatively simple to get going. This is how I started writing the Glimpse extension for Toastr. In a future post I’ll dive more into how I created this extension so you can see how you can create your own extensions.

Glimpse.Toastr shows you information about the life-cycle of each toast. When it was shown/hidden, the type of toast, each toast’s configured options, toastr-wide options, and how long each toast lasted (see image above).

Installing via NuGet

You can install glimpse.toastr using NuGet by using the command install-package glimpse.toastr -pre. It is currently in pre-release as I am hoping to gather some feedback and work out any kinks.

What’s Next?

Glimpse.Toastr is not currently in the HUD, but I am exploring how to add a small panel in the HUD for it. I’d also like to see the Glimpse team make the glimpse.js file be part of its own NuGet package so I can just pull in that one file. Currently there is a Glimpse core package that has the glimpse.js and the server components such as glimpse.axd. I can;t use that since it would put code on the server, which glimpse.toastr does not need. So for now I embedded the glimpse.js file directly into glimpse.toastr. But the right way to do this is to have it rely on a glimpse client core package.

tags: glimpse toastr
  • Rodney

    Hi John,

    Thanks for the useful library – I am using it in a PhoneGap app.

    Question: I want to use a Font-Awesome icon for the 4 different types of messages – I see it uses this in the CSS

    #toast-container > .toast-info {
    background-image: url(“data:image/png;base64,i…….) !important;
    }

    how would I change that to reference a font-awesome image icon? Thanks

  • Rodney

    Thanks for the prompt response. Toastr makes my PhoneGap app seem so much more responsive (replacing the modal Alert boxes)

%d bloggers like this: