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

Question

我正在尝试通过查看页面源代码来查看我的 HTML 页面上 JavaScript 代码片段所创建的 HTML。我不想使用任何附加程序。这是否可以通过编程实现？

- Luke

---

使用Firebug。它正是你所需要的。 - SLaks

javascript:alert(document.innerHTML);？ :) - bzlm

你尝试过使用 Chrome -> 右键点击 -> 检查元素吗？ - David Laberge

或者如果不在Firefox中，可以使用Chrome / Safari的开发人员工具或IE的开发人员控制台（F12）。右键单击并检查元素。 - Michael Berkowski

Answer 1

在Firefox中，按Ctrl/Command-A选择全部内容，右键点击并选择“查看选定源代码”。这将显示该页面的DOM，而不仅仅是起始HTML和JS。

- Mike Thomsen

Answer 2

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

- SLaks

Answer 3

这是我在IE（版本10）中最喜欢的解决方案：

1）按F12键启动开发人员工具
2）单击“控制台”选项卡
3）在底部提示符中输入：

document.body.innerHTML

现在它应该在当前窗口中显示动态、实时生成的html。(如果要查看html头部分，可以将单词'body'替换为'head')。

- tdog

Answer 4

在Mac上使用Safari 13（2019）完成此操作：

1. 确保启用了开发菜单（偏好设置>高级>在菜单栏中显示开发菜单）。
2. 从开发菜单中选择显示Web检查器。第一次这样做时，通常会选择资源选项，显示您的未呈现HTML源代码。
3. 将水平菜单上的选择更改为元素。

4. 展开DOM树（圆圈三角形），直到找到你的JavaScript实例，你将会看到它的未渲染和已渲染版本，如下面的示例所示（一个特定日期的链接）。

不需要插件或其他额外软件（还有一些其他不错的工具）。

- David

---

曾经忘记了如何操作，四年后发现自己的解决方案。因此，我决定更新Safari最新版本的说明。 - David

Answer 5

不行，你需要一个监控DOM变化的工具。浏览器只会显示未受JavaScript或任何其他客户端编程影响的标记。

使用WebKit的Web Inspector或其他类似工具。

- Martin Bean

Answer 6

在大多数浏览器中按下F12键可以打开开发者工具。

搜索您选择的浏览器的各种开发者工具的教程。

- Simon Sarris

Answer 7

我虽然晚了8年，但我还是开发了一个Chrome扩展来实现这个功能：

查看渲染源码

它会显示原始的HTML代码和渲染后的DOM树，并比较两者之间的差异。

- Jon