Debugging ASP.NET AJAX Applications with the Trace Console AjaxControlToolkit Control

I was browsing through the YUI developer site and came across another component that I thought would make a nice addition to my ever growing toolbox.  It's their Logger Control.  The YUI guys have created a floating debug console window that displays messages as they are written to the YUI log object.  You can check it out for yourself on their demo page.  Besides just displaying the messages, the Logger Control also supports a few of the other standard log browsing features, including

  • Viewing messages by severity (info, warning, or error)
  • Viewing messages by source (global or LogReader in their sample)
  • Pausing and clearing the trace
  • Collapsing the trace console window
  • Repositioning the trace console window by 'drag and drop'

Live Demo (IE6, IE7 and FF) | Download (ASP.NET 2.0 and Toolkit Version 1.0.10920.0)

I think this Logger Control could be quite useful.  ASP.NET AJAX has a similar concept, however the feature set isn't quite as rich (compare the YUI demo with the ASP.NET AJAX demo and I think you will see what I mean).  To assist in debugging ASP.NET AJAX applications, Microsoft created the Sys.Debug helper class.  It is made up of the following methods

   image

When you log messages using Sys.Debug.trace and Sys.Debug.traceDump, a message is written to the host environment's debug console (if one is attached - see JavaScript code below). 

image

Additionally, if you have a TEXTAREA element to the page with an ID of 'TraceConsole', the trace message will be appended here as well.  While appending the logging information to a TEXTAREA is helpful, I thought the YUI console is much nicer to work with.  And I think something like this would really be useful while developing AjaxControlToolkit extender controls, or even just in cases where the page contains a piece of non-trivial JavaScript. 

So I created a scaled down version of YUI's Log Control and rolled it into a AjaxControlToolkit server control.  For v1 of this control, I added support the following features:

  • Pausing and clearing the trace
  • Repositioning the trace console window by 'drag and drop'
  • Pinning and unpinning the console to the upper right hand of the window.  As you scroll, the window stays put. 
  • Collapsing and expanding the window

Depending upon how useful I find this control will determine if I come back through and add additional enhancements.  Anyway, below are a couple of screen shots of the control and below that is a quick run through of the implementation details.  As always you are free to download the code and view the interactive to demo to see if it is something you find useful.

image 

image

The TraceConsole Control

Because this control isn't extending any existing controls (i.e. there is no TargetControlID), I used the ScriptControlBase as the base class instead of the ExtenderControlBase.  Other than that, besides rendering the HTML structure for my Logger window, my server control takes care of sending the required JavaScript and CSS files to the client (this is done by including the following attributes to the TraceConsole's class definition).  The RequireScript attribute is included so the DragPanel and AlwaysVisible scripts are included (remember I want my console to support drag and drop repositioning as well as pinning the window to the upper right hand corner of the window), the ClientScriptResource attribute contains the path to the JavaScript behavior for my controls and the ClientCssResource attribute does the same for my stylesheet. 

image

Besides taking care of identifying the script's and stylesheet, I also am having the control render the HTML structure that defines the console.  I accomplished this by overriding the RenderContents method and adding code to build out my HTML structure.

Client Side Behavior

The JavaScript portion of of my control is a bit more interesting.  The initialize function is setups the client side functionality by

  • Adding a TEXTAREA element to the page (if it doesn't already exist) and then hiding it by setting it's display attribute to none
  • Setting up the handlers for both the 'Pin' and 'Collapse' click events
  • Setting up the handlers for both the 'Pause' and 'Clear' click event's as well as creating a callback function that polls the TEXTAREA to see if new contents were added (TEXTAREA elements don't support the change events)

The guts of the client side behavior is contained in the 'Pause' button's event handler.  I added comments to the logic so you should be able to follow along.

image

The only other interesting part of this control is that I was able to reuse the client side behaviors for the AlwaysVisible and DragPanel controls.  The click event handler for the Pin button dynamically creates a new instance of the AlwaysVisibleControl and let's it take care of the logic that keeps the control positioned on the upper right hand corner of the page.  Likewise, when the control is unpinned, an instance of the FloatingBehavior is dynamically created and attached to the console's header so the control can be repositioned using drag and drop.

Adding the Control to Your Page

To use this control, I have just added the following markup to my page.

image 

That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/93

Comments


Posted by: Vish on December 13, 2007 12:00 AM

Hi Matt,
Once again an awesome article.....
and a well commented code !!!

Hey matt...
again...again and again... you and your gorgeous controls!
thanks a lot, one more time!
It is very useful!
you are THE guy!

Posted by: Sreedhar Vankayala on December 14, 2007 12:00 AM

Awesome article!

I see demos in every page. Instead, Is there one page in your site with only demos of all your articles?

Just curious!

Thanks

This is AWESOME!

Any chance you can make this sucker "stick" to the most current line? I hate having to drag-scroll to see the most recent output. :)

@MichaelD! -

No doubt, that needs to be done. When I make the update I will update the post.

@Sreedhar Vankayala -

This is something I have been meaning to do, just havent found the time. Hopefully I can get to this soon.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Matt Berseth wrote: @MichaelD! - No doubt, that needs to be done. When I make the update I will update the post. @Sr...
  • MichaelD! wrote: This is AWESOME! Any chance you can make this sucker "stick" to the most current line? I hate havi...
  • Sreedhar Vankayala wrote: Awesome article! I see demos in every page. Instead, Is there one page in your site with only demos...
  • Vish wrote: Hi Matt, Once again an awesome article..... and a well commented code !!! ...
  • guilherme wrote: Hey matt... again...again and again... you and your gorgeous controls! thanks a lot, one more time! ...