View rendered source in IE, Firefox and other browsers 


November 18, 2009 22:53:33    Last update: November 18, 2009 22:56:17
The "View Source" function in browsers displays the HTML source as it is received from the server. It does not show the HTML source after the DOM structure has been altered by JavaScript. Sometimes you want to see the HTML source as it is currently rendered in the browser.

For Firefox:
  • Without using any extension:
    select an area of the page, right click and select "View Selection Source"
  • Using Firebug:
    1. click the HTML tab
    2. double click the body tag to edit
    3. copy all text in the edit panel and paste to your favorite editor.

  • Using View Source Chart:
    right click and select "View Source Chart"

For IE:

For all browsers without using any extensions or plugin:
  • View Source Bookmarklet
  • JavaScript Executor bookmarklet:
    1. enter document.body.innerHTML in the input area and click "Execute".
    2. copy and paste the text in the results area to your favorite editor. But note that the HTML source includes that of the JavaScript Executor itself (at the bottom).

Share |
| Comment  | Tags