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.
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.
Nice. I’ve been using this toolbar for quite a while now but I didn’t know it had that feature.
Thx for the tip.
Thomas Colliers
December 4th, 2006
Also check out FireBug, shows you Ajax requests in real time, both the request you made and the response from the server. Also has a JavaScript debugger/console, interactive rendered source (you can change attributes, form values and also highlights on the page whatever element you’re over in the source), applied styles, dom tree, events browser … it’s amazing. It’s just about replaced the Web Developer Toolbar for me.
https://addons.mozilla.org/firefox/1843/
Rob Cameron
December 4th, 2006
Hi Rob,
I used to use Firebug on Firefox 1.5 but I was having a LOT of problems with Firefox crashing at the time.
A colleague suggested that Firebug was the issue, possible using a lot of ram. I ended up turning it off and only using it when I needed it, I’ll have to have another look! Thanks
sharmo
December 4th, 2006
In firefox, you can also just select the area, right-click then click on view selected source.
Scott P
December 4th, 2006
hi, i want to view records from database after add every records without reloading page….
suppose if i click button named as “Add” addform have to open then i filled it when i click submit button i have to see the all records from database without page reloading
Kadambur kumar.N
September 20th, 2007
I can easily see the source code in Firefox after selecting the Ajax generated text. and On right click view selected source.
Satya Prakash
April 4th, 2008