Debugging HTML that is rendered at runtime.

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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.