如何查看JavaScript呈现的源代码？

Question

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

Answer 1

在firefox中，执行ctrl / command-a选择all，右键单击并执行“查看选择源”。这将显示当前页面的DOM，而不仅仅是它开始的HTML和JS。

Answer 2

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

Answer 3

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

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

document.body.innerHTML

现在它应该在当前窗口中显示动态，当前，生成的html。 （要查看html head部分，您可以将'body'替换为'head'。）

Answer 4

没有。您需要一个监视DOM更改的工具。浏览器只会向您显示不受JavaScript或任何其他客户端编程影响的标记。

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

Answer 5

在大多数浏览器中按F12以显示开发人员工具。

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

Answer 6

要在Mac上使用Safari执行此操作：

1. 确保已启用“开发”菜单（首选项＆gt;高级＆gt;菜单栏中显示开发人员菜单）。
2. 选择＆＃34;显示来源＆＃34;从开发菜单。 这通常会在路径foo.html＆gt;的中心窗口中显示未呈现的HTML源代码。源代码。
3. 通过＆＃34;源代码＆＃34;切换选择器将其更改为＆＃34; DOM Tree＆＃34;。
4. 展开DOM树，直到找到您的JavaScript，您将看到它们都是未渲染和渲染的版本。

不需要插件或其他软件（以及其他一些不错的工具）。

Answer 7

我已经晚了8年，但是我做了一个Chrome扩展程序来做到这一点：

View Rendered Source

它显示原始HTML和呈现的DOM，并比较两者之间的差异。