Miscellaneous Debris

Avner Kashtan's Frustrations and Exultations
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:
<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.

Published Tuesday, August 02, 2005 5:09 PM by AvnerK

Comments

# re: Debugging HTML that is rendered at runtime.@ Tuesday, August 02, 2005 10:43 AM

If using Firefox then selecting the dynamically generated content then selecting "view selection source" from the menu will show the source of the javascript generated markup.

Alternatively the "Formatted Source" plugin also shows the code generated by javascript etc.

Kevin Ansfield

# re: Debugging HTML that is rendered at runtime.@ Tuesday, August 02, 2005 10:58 AM

There is an extension for IE that provides this feature.

http://www.thundermain.com/FullSource.html

Paul Schaeflein

# re: Debugging HTML that is rendered at runtime.@ Tuesday, August 02, 2005 11:17 AM

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. :)

Avner Kashtan

# re: Debugging HTML that is rendered at runtime.@ Tuesday, August 02, 2005 3:23 PM

Html source bar http://www.viksoe.dk/code/htmlbar.htm
is great because you can also see the source of hidden frames. The author was kind enough to include the source code to the tool so you can add new things if you like.


The same guy makes IE scripter which allows you to inject script into the page from a file which has proved useful as well.

Dave

# re: Debugging HTML that is rendered at runtime.@ Tuesday, August 02, 2005 4:50 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.

AndrewSeven

# re: Debugging HTML that is rendered at runtime.@ Sunday, November 18, 2007 5:48 AM

You can also avoid files by opening source in a new window:

<script defer language="javascript">

var sSrc = document.body.innerHTML;

sSrc = "<pre>"+sSrc+"</pre>";

var wWin = window.open();

wWin.document.open();

wWin.document.write(sSrc);

wWin.document.close();

</script>

(I didn't test this code yet...)

oria

Leave a Comment

(required) 
(required) 
(optional)
(required)