I am trying to see the HTML that's created by a JavaScript snippet on my HTML page by viewing the page source. I don't want to use any add-on programs. Is this possible through programming?

I am trying to see the HTML that's created by a JavaScript snippet on my HTML page by viewing the page source. I don't want to use any add-on programs. Is this possible through programming?

• javascript
• html

• 1 Use Firebug. It's exactly what you need. – SLaks Commented Oct 31, 2011 at 17:51
• javascript:alert(document.innerHTML);? :) – bzlm Commented Oct 31, 2011 at 17:52
• Have you tried the Chrome -> right click -> inspect Element ? – David Laberge Commented Oct 31, 2011 at 17:53
• Or if not in Firefox, use Chrome/Safari's developer tools or IE's Developer console (F12). Right-click and inspect element. – Michael Berkowski Commented Oct 31, 2011 at 17:53

7 Answers 7

In firefox, do ctrl/mand-a to select all, right click and do "view selection source." That'll show the DOM for the page as it currently is rather than just whatever HTML and JS it started from.

Just look at the innerHTML of any object in the DOM.

Here is my favorite solution in IE (version 10):

1) Press F12 key to launch Developer Tools
2) Click on the "Console" tab
3) In prompt at the bottom, enter:

document.body.innerHTML

Now it should display in the current window the dynamic, current, generated html. (To look at the html head section instead you can replace the word 'body' with 'head'.)

To do this with Safari 13 (2019) on the Mac:

1. Ensure that the Develop menu is enabled (Preferences > Advanced > Show Developer Menu in menu bar).
2. Select Show Web Inspector from the Develop menu. The first time you do this the option Resources will typically be selected, showing you the un-rendered HTML source.
3. Change the selection on the horizontal menu to Elements.

4. Expand the DOM Tree (circled triangle) until you get to your JavaScript instance, which you will see both as its unrendered and rendered version, as in the example below (a link specific for a particular day of the month).

No plugin or additional software required (and some other nice tools there too).

No. You need a tool that monitors changes to the DOM. Browsers will only show you the mark-up unaffected by JavaScript or any other client-side programming.

Use WebKit's Web Inspector or other similar tool.

Press F12 in most browsers to bring up the developer tools.

Search for tutorials for the various developer tools of the browser of your choice.

I'm 8 years late but I made a Chrome extension to do just this:

View Rendered Source

It shows the raw HTML and the rendered DOM, and pares the diff between the two.