CODEWITHSUNDEEP
javascripthtml
Luke
Luke

Reputation: 317

How can I see JavaScript-rendered source?

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?

Upvotes: 4

Views: 6592

Answers (7)

David
David

Reputation: 1050

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.

Elements selected in Safari Web Inspector

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

Example of unrendered and rendered version of JavaScript

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

Upvotes: 1

Jon
Jon

Reputation: 482

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 compares the diff between the two.

Upvotes: -1

tdog
tdog

Reputation: 615

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

Upvotes: 1

Mike Thomsen
Mike Thomsen

Reputation: 37506

In firefox, do ctrl/command-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.

Upvotes: 3

Simon Sarris
Simon Sarris

Reputation: 63802

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.

Upvotes: 0

Martin Bean
Martin Bean

Reputation: 39389

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.

Upvotes: 0

SLaks
SLaks

Reputation: 887195

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

Upvotes: 2

Related Questions