How to get resultant HTML after executing all scripts?

Question

How to get effective HTML after executing all scripts? Actually scripts are adding and modifying control and css in the page. I would like to see html of resultant display as a static page. Is there any way to get this?
Edit: Suppose if background image is added using javascript, How can i see in Html OR css? Please try to get this before giving answer.

Answer 1

Use the firebug plugin for firefox, with it you can 'view generated source'.

Answer 2

One way would be to use Firefox with the Firebug extension.

Firebug is an extension for web developers. Among other things, it offers an "HTML panel":

The HTML panel displays the generated HTML/XML of the currently opened page. It differs from the normal source code view, because it also displays all manipulations on the DOM tree. [...]

A similar solution for MS Internet Explorer would be the Internet Explorer Developer Toolbar.

Note that both solution are browser-specific. There is no way to get the resultant HTML independent of the browser used, because this HTML only exists in the working memory of the browser (so you cannot, say, sniff it on the network).

Answer 3

This is a javascript approach. Unfortunately, it doesn't work perfect. For example, it doesn't include the contents of textarea's.

document.documentElement.innerHTML

Another way is selecting everyting (Ctrl + A) and choose 'View selection source' from a context menu.

Answer 4

The Web Developer Toolbar addon for Firefox has a 'View Generated Source' button that let's you do that. It's under the 'View Source' Menu of the toolbar.

It presents manipulated document as a static source, like what the "View Source" option does, but with modification by the Javascript.