Glimpse 1.7.0 released – First class WebForms support & MVC5

Its been a while, but we have been hard at work version 2.0 (more on that later) and producing some new packages – which we are releasing TODAY! These new packages represent the first new packages we have released since Entity Framework support went out the door in March and I think you are in for a real treat.

We have released two new packages today and a bunch of other minor features/fixes. Here are the highlights:

  • Glimpse.WebForms Released:
    • Amazing ViewState support
    • New Control Tree and Page Life Cycle Tabs
    • Deep HUD integration
  • Glimpse.MVC5 Released:
    • All the tabs you previously had with MVC4
    • Support for attribute driven routes

WebForms support

Glimpse.WebForms is a revolutionary step forward in the way we will work with WebForms in the future. For years, many have struggled to understand how WebForms works, what is responsible for ViewState bloat or if you even have a ViewState issue. As of today, we finally have the tools we need to know exactly how WebForms is running and what is responsible for problems we may be experiencing.

ViewState Reimagined
We have taken a crack at totally re-imagining what we have come to expect when working with ViewState.
ViewStatePreview

As you can see, without any ceremony, Glimpse shows you all of your controls and the ViewState that each control has generated. This is insight, that until now, we have only been able to dream about.

Current Pain:
For most, understanding/controlling ViewState has always been a struggle. When we think about ViewState, most think about a hidden input in our HTML that contains a blob of text which does something for our site.

ViewStateRaw

Mostly, when its running smoothly, ViewState isn’t one of those concerns that we think about every day. But at some point, we discover that amount of data being sent down to the page in ViewState growing out of control – ViewState bloat.

Solution Seeking:
When this occurs we typically turn to Google, which brings up a trusty StackOverflow article that will give us the answer of where to start – Seeking advice on de-bloating asp.net 3.5. Unfortunately though, the top answer is to:

“Try ASP.NET MVC or one of the other MVC web frameworks for .NET”

For most this is a very unhelpful and disappointing answer. Not everyone has the “luxury” to rewrite their whole site just to solve this one problem.

ViewState De-coders:
So, after some more searching we discover that there is a way of taking the ViewState text and running it through a de-coder:
ViewStateDecoded
At first glance, we think we are getting somewhere, but we soon discover that we have no idea what the data means or what control is responsible for generating it. Note: all this assumes that we aren’t running out WebForms site in .NET 4.5, as ViewState is now encrypted. Hence, making the only tools we had useless.

Enter Glimpse!
Glimpse is in a unique position to try and solve many of the problems we have around ViewState. Since we run on the server, we are able to see the ViewState before it is encrypted and we are even able to determine which server control generated the state.

Here is a specific example of what Glimpse is able to bring to the table:

Here is a specific example of what Glimpse is able to bring to the table

1) Master Page State,   2) Cart Count State   and   3) List View State

vs.
1) Master Page State

1) Master Page State

2) Cart Count State

2) Cart Count State

3) List View State

3) List View State

Strongly Typed ViewState:
When looking at the above screen shots of Glimpse, its easy to miss the way in which we display the data. As it turns out the ViewState object model is designed for the systems to process (not humans) and is optimised for minimum payload size. Hence, if we don’t perform any additional logic, the below is what you would see:

"Untyped ViewState data"

“Untyped ViewState data”

When looking at this, you’d be easily forgiven for finding it better than what a decoder provides (since we know what ViewState belongs to what controls), but it still doesn’t match our mental model of what we think the data should look like.

Hence, we decided to take a crack at making that better too. We discovered that since we know which server control generated the ViewState, we are able to present the data in a format that “strongly types” it on a control by control basis. This technique changes the output we can show you dramatically. Resulting in the below:
ViewStateTyped

No more guessing:
With the advent of this capability, you will no longer have to guess what controls generated which ViewState data. Glimpse makes this completely transparent and understandable to everyone.

Control Tree
As you would have guessed by looking at the above screenshots, we are able to present you the Control Tree Hierarchy as well. This structure is used by the WebForms framework to generate the HTML that you see on your page. This may look familiar from the Trace.axd days, but as discussed above, Glimpse has taken it up a notch.

Here is a list of what we show you out of the box:

  • Control Id: This is the server-side ID that is generated by the framework for your control. If you specifically set an ID, then the system will display that name instead.
  • Type: The system Type of the rendered control.
  • Render (w/ children): The size in bytes of the HTML generated by the control and its children.
  • ViewState: The size in bytes of the ViewState generated directly by the control.
  • ControlState: The size in bytes of the ControlState generated directly by the control.

Page Life Cycle
In sites using WebForms, the page life cycle is a series of events which fire on every page and has a very defined sequence. As fate would have it, its one of those things that we rarely remember exactly how and when they are supposed to execute. Glimpse makes this transparent by showing you which events occurred, their timings and offsets.

Here is what we show you out of the box:
PafeLifeCycle

Trace Tab:
Beyond showing these events in the Page Life Cycle tab, we automatically trace out the Begin and End notifications for each event to the Trace Tab. This means that when ever you write out data via either of the following methods, it will show up between the relevant Page Life Cycle trace messages:
System.Diagnostics.Trace.Write("This is a trace Message");
or
System.Web.HttpContext.Current.Trace.Write("This is another trace Message");

With that, here is the final result:
PageLifeCycleTrace

Timeline Tab:
Besides just adding this data to the Trace tab, we have included the events within the timeline tab. This means that when you have other timing events (like database access) occurring, you will be able to visual see exactly what is happening.
WebFormsTimeline

WebForms in HUD
If all this wasn’t enough, we decided to make sure the most important ViewState and Page Life Cycle data be shown within HUD (heads up display).
WebFormsHUD

HUD is specifically designed to stay at the bottom of every page and stick with you as you go about your normal development effort. Taking this into account we show you the following out of the box, without having to click, mouseover or select anything:

  • Load: Time between Begin PreLoad and End LoadComplete.
  • Render: Time between Begin PreRender and End Render (including SaveState events).
  • ViewState: Total size in bytes that the page has stored as ViewState.

If you are used to the Glimpse.MVC packages, the Load and Render times are similar to the Action and View times that we show you. But for those who use ViewState, knowing exactly what each page is generating within HUD is huge. This one figure alone is invaluable, let alone the rest of what this package brings.

HUD popup view
HUD also allows us to show a more detailed view of the most important information we have in the form a popup that appears when you mouse over a section. For WebForms, we have taken advantage of this to show a contextual view of the Page Life Cycle information along with any database activity you may have performed.

WebFormsHUDPopup

Beyond seeing what we saw in the mini view, we have added the Page Life Cycle events and included exactly different database events have occurred. This allows you to see straight away what events are taking the longest and what queries are occurring where. Prior to Glimpse.Webforms, building this picture was virtual impossible.

MVC5 support

The other package we are releasing today is Glimpse.MVC5. This is an incremental release for MVC and designed to match the latest release of ASP.NET MVC. With this release, you will get all the usual goodness you have come to expect from Glimpse.MVC*. The release also contains support for the new attribute driven routing that MVC5 brings to the table.

Attribute Drive Routing

Attribute Drive Routing

Glimpse Route Tab

Glimpse Route Tab

Release Notes

Beyond everything I have already covered in the above, this release includes a number of updates and fixes for a variety of issues. This release contains updates to following packages:

  • Glimpse.Core – Welterweight release 1.7.0
    • Improvement which allows Glimpse.axd to be protected by custom security policies
    • Fix History tab causing issues when invalid characters are present in a Session Name
    • Performance improvement Ensure client shell is forced into a new rendering layer within browser
    • Update Visual Studio solution to VS2013
    • Improvement to client which adds support for paddings when rendering structured layouts
    • Improvement to client to make array rendering more resilient
    • Improvement to client which ensures table headers have the correct default style applied
    • Improvement to client which brings better error management in master rendering engine
    • Switch assemblies to be marked as CLS-compliant
    • Switch Glimpse.axd over to use templates for generating the configuration resource
    • Ensure that Glimpse ignores BrowserLink’s preflight requests
    • Make sure HUD only displays Ajax requests that have a Glimpse Payload
  • Glimpse.AspNet – Welterweight release 1.5.0
    • Fix bug which caused the writing of log data during AppDomain unloading not to appear
    • Fix bug which meant that in some cases the end body tag couldn’t be located
    • Switch assemblies to be marked as CLS-compliant
  • Glimpse.MVC* – Middleweight release 1.5.0
    • Implemented support for MVC5
    • Switch assemblies to be marked as CLS-compliant
  • Glimpse.WebForms – Heavyweight release 1.0.0
    • Advent of the Control Tree and Page Life Cycle tabs
    • WebForms data now shows up in HUD (including ViewState size), in Timeline Tab and Trace Tab
  • Glimpse.Ado – Flyweight release 1.6.0
    • Improved SQL Tab layout so that the overall stats are displayed at the tab
    • Switch assemblies to be marked as CLS-compliant
  • Glimpse.Ef* – Bantamweight release 1.5.0
    • Switch assemblies to be marked as CLS-compliant

In terms of pull requests, I have to say a big thanks to:

  • Christophe Gijbels
    • #586 Securing default configuration resource
    • #563 Changed in-code html generation to template approach for configuration resource
    • #555 Fixed PreBodyTagFilter partial writes handling
  • Kelly Stuard
    • #565 Making Glimpse CLS-compliant.
    • #564 Fix race condition between message bus and subscribers
  • Jeff Burn
    • #580 Fix HUD for WebForms with no viewstate

And for the great issue reports, I want to thank:

We also had a few users who really hammered on early builds of the WebForms package to ensure that it would work well for the whole community. Thanks a million to:

Well I think that is a wrap. For a full list of changes, issues and commits see below:

Let us know if you have any thoughts or comments and I hope you enjoy this release.

3 thoughts on “Glimpse 1.7.0 released – First class WebForms support & MVC5

  1. Pingback: Les liens de la semaine – Édition #53 | French Coding

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>