Debugging AJAX apps can be very tricky. The technology went mainstream relatively soon and development tools are still catching up, so you do need to use a bag of neat tricks AND dirty hacks to see what is really going on. I've decided to create a series of blog posts dedicated on how you can tackle common AJAX problems.
Part I - View the actual HTML source.
This one sounds easy. Hey, just select "View Source" from the browser and voila, check out the generated Html. Of course, in AJAX world, things are never that easy. "View Source" actually returns the source of the original page - any Javascript / DOM modifications after the AJAX request are not visible. What do we do now if we want to see the current Html dump?
IE: Use this clever hack to return the current state of the page - typing "javascript:'<xmp>' + window.document.body.outerHTML+ '</xmp>'" in the address bar should do the trick.
FireFox: Use this neat FireFox extension to view the "Generated Source" instead of plain "View Source".
In part II I will talk about IDEs supporting AJAX (actually, the lack thereof) and what is the best IDE approach to AJAX today.
