Debug and explore AJAX with FireBug
AJAX, ASP.NET By Dave Ward. Updated March 3, 2009“where did you find documentation on the sender and event args objects in the PageRequestManager events?”
Lately, if I don’t hear that question at least a dozen times a week, I start worrying that something’s wrong with my contact form. I can understand why it would be a common question. The documentation we currently have for the JavaScript portion of the AJAX framework is on the light side.
To answer the question: I didn’t. However, I can show you something even better.
Exploring ASP.NET AJAX with Firebug
By using a JavaScript debugger, it becomes trivially easy to explore these objects and find out what makes them tick, even without formal documentation. Personally, I use Firebug for JavaScript debugging, so that’s what I’ll use to demonstrate. Any JavaScript debugger that allows you to set breakpoints will work though.
The code that I’m going to use for this example is my CSS style as AJAX progress indicator tutorial. With Firebug open (F12), I load up the tutorial in Firefox and click the script tab. Since my JavaScript is embedded in the page, I have to scroll down a bit, but it’s easy to find.
Let’s say I’m interested in learning more about the InitializeRequest event and how to find out the ID of the control that fired it. So, I’m going to set a breakpoint inside my InitializeRequest event handler, by clicking the left margin of the window beside a line in the handler:

With the breakpoint set, I click the submit button on my ASPX page. Since the breakpoint was in the InitializeRequest event, Firebug stops execution almost immediately. I’m given a JavaScript debugger with watches, breakpoints, and execution control very similar to what I’m used to using in Visual Studio:

Right away, I find what I was looking for: args._postBackElement.id contains a string with the name of the button that fired the event.
Don’t stop there!
You can’t see it in the screenshot, but there is a wealth of information in these objects. I would encourage anyone who is serious about ASP.NET AJAX framework development to take a few minutes and really dig through them this way. It’s hard to beat the power of learning by seeing and touching something, as opposed to just reading about it.
Don’t forget to also take a look at the PageRequestManager object itself. As the underpinning of the entire framework, it has some very useful methods and properties.
Similar posts
What do you think?
I appreciate all of your comments, but please try to stay on topic. If you have a question unrelated to this post, I recommend posting on the ASP.NET forums or Stack Overflow instead.
If you're replying to another comment, use the threading feature by clicking "Reply to this comment" before submitting your own.



You can debug java script with Visual Studio 2008. It’s fantastic. I’m using it to write javascript side of apps.
I know this is an old post but I thought this was a great into into firebug.
One thing I did notice while I was experimenting was that the response tab always triples its contents. Is this normal? I wouldn’t think so since I don’t see this ‘bug’ on any firebug screenshots.
For example – if the response is supposed to show “Hello World” – the response actually shows “Hello WorldHello WorldHello World”
If I actually do something with the response – say, store it in a variable, everything works fine (no tripling) but its just hard to read if I need to debug.
Did I set something up incorrectly? I’m using FF 3.08 and FB 1.33
Thanks in advance,
A. Soong
I haven’t run into that before (using 1.3.3 here too).
What type of response? Something in the “net” tab? An AJAX response in the console tab?
You might want to try disabling all addons except for Firebug, to make sure it’s not a bad interaction between addons.
Anyone using Splinetech javascript debugger (http://www.javascript-debugger.com)?
Any opinions?