December 4, 2006

Viewing AJAX generated source code

When developing for the web there is often a need to view the (X)HTML source code of a page to see exactly what ColdFusion (or your server side language of choice) is generating from the server.

One of the problems you might face is when viewing the source code of an AJAX generated event. Of course AJAX being asynchronous means that the page doesn’t reload in the browser, so viewing the source code doesn’t allow us to see the content which was generated by our AJAX call.

There are however a couple of nice solutions to this problem! The first of which you probably already have at your fingertips as it’s part of the web developer toolbar for Firefox by Chris Pederick. Please tell me that you all are using Firefox and its multitude of developer addons! Good :)

All you need to do to see AJAX generated source is to choose ‘View Generated Source’ from the ‘View Source’ menu option on the web developer toolbar.

View Generated Source

The second and muuuuch nicer option also comes in the form of a Firefox addon/extention by Jennifer Madden called ‘View Source Chart’.

A few quotes from Jennifer’s site:

  • Creates a Colorful Chart of a Webpage’s Rendered Source Code
  • Displays Source in its Altered State After the DOM has been Manipulated by JavaScript

This tool is invaluable to all developers who are involved in the ‘front end’. All the source code is colour coded, all extraneous whitespace is removed and the source is collapsable/expandable much like what you would expect from dumping complex ColdFusion objects (arrays, structures etc) using <cfdump>.

Plus you get some keyboard shortcuts like:

  • Ctrl + - Allows Zooming OUT of HTML Chart by decreasing text size. Zooming out allows a broader view of the document structure.
  • Ctrl + + Allows Zooming IN of HTML Chart by increasing text size.
  • Ctrl + 0 (zero) Changes text size back to normal.
  • Ctrl + F Employs the find functionality. Alternatively, you may use Firefox’s Find-As-You-Type functionality (specified in Options).
  • Ctrl + W Closes window.
  • Ctrl + S Saves the chart to your hard drive.

View Source Chart is free as of version 2.5.02, version 2.6 will cost you USD$3 but you do get some extra features.

© Michael Sharman 2017