A little tip when we're generating HTML content on-the-fly using client-side code, whether HTC behaviours or javascript:

As we all know, when we try to View Source on such a page, the HTML we see is the base HTML that was received from the server, not the final layout after all the client-side code has run and changed things. This often makes it hard to debug, since we can't see the final layout that the user sees. This technique will help us get the final, rendered page for debugging.

We'll add this script block to the end of our HTML:
<script defer language="javascript">
var oFS = new ActiveXObject("Scripting.FileSystemObject");
var oDump = oFS.CreateTextFile("RenderedPage.html", true);
oDump.Write(document.body.innerHTML);
</script>

This can be written with our choice of scripting languages, of course. I don't know if other platforms have objects equivalent to the FileSystemObject for easily creating a text-file. We'll have to allow the browser to run ActiveX's for this to work, of course.

The RenderedPage.html file we save here is the final version of the page as it is rendered, running after all other code has run (at least code that runs on load). This can often point the way to the source of the bug - especially layout bugs.

3 Comments

• Kevin Ansfield said Tuesday, August 2, 2005 2:43:00 PM

  If using Firefox then selecting the dynamically generated content then selecting &quot;view selection source&quot; from the menu will show the source of the javascript generated markup.
  
  Alternatively the &quot;Formatted Source&quot; plugin also shows the code generated by javascript etc.

• Avner Kashtan said Tuesday, August 2, 2005 3:17:00 PM

  The first six years of my professional career were spent in the military, in a network that was physically disconnected from the internet. As a result, I've developed the annoying tendency to go and reinvent wheels that have been rolling smoothly before me.
  
  Thanks for the links and info. :)

• AndrewSeven said Tuesday, August 2, 2005 8:50:00 PM

  If you only need this from time to time, just select and copy an area in the browser then paste into VS in the Html view of a aspx/htm page.