如何查看 JavaScript 渲染的源代码？

Question

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?

Answer 1

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.

Answer 2

只需查看 DOM 中任何对象的innerHTML 。

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

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.