查看生成的网页源的最佳方法？答案

【问题标题】：Best Way to View Generated Source of Webpage?查看生成的网页源的最佳方法？
【发布时间】：2010-12-17 13:50:19
【问题描述】：

我正在寻找一种工具，它可以为我提供正确的生成源，包括 AJAX 请求对 W3 验证器的输入所做的 DOM 更改。我试过以下方法：

Web Developer Toolbar - 根据文档类型生成无效源（例如，它删除标签的自闭合部分）。丢失页面的文档类型部分。
Firebug - 修复源中的潜在缺陷（例如未关闭的标签）。还会丢失标签的 doctype 部分并注入本身是无效 HTML 的控制台。
IE 开发者工具栏 - 根据 doc-type 生成无效的源代码（例如，它使所有标签大写，违反 XHTML 规范）。
突出显示 + 查看选择源 - 通常难以获取整个页面，也不包括 doc-type。

是否有任何程序或附加组件可以为我提供源的当前版本，而无需以某种方式修复或更改它？到目前为止，Firebug 似乎是最好的，但我担心它可能会解决我的一些错误。

解决方案

事实证明，正如贾斯汀所解释的那样，我想要的东西并没有确切的解决方案。最好的解决方案似乎是验证 Firebug 控制台内的源代码，即使它包含一些由 Firebug 引起的错误。我还要感谢 Forgotten Semicolon 解释为什么“查看生成的源”与实际源不匹配。如果我可以标记 2 个最佳答案，我会的。

【问题讨论】：

嗯，我以为他要求的是相反的——服务器发出的确切 HTML。杰里米？
没关系，刚看到新评论。现在，您要尝试做的事情变得更有意义了-感谢您的澄清。我会相应地更新我的答案。
值得注意的是，这篇文章的许多浏览者都忽略了要点，即静态源不能用于分析被javascript修改过的页面。 Firebug 非常适合这一点，但如果有 IE 工具也能做到这一点，那就太好了，因为浏览器兼容性是 IE 的一个大问题。
Firebug 不会修复 HTML 中的任何错误。它只是从 Firefox DOM 中渲染标签。 Firebug 1.6 避免添加元素；对于所有版本的 Firebug，您可以通过禁用控制台面板来避免更改 DOM。
我刚刚从这个问题中学到了很多东西！

标签： html xhtml firebug w3c web-developer-toolbar

【解决方案1】：

贾斯汀已经死了。这里的关键是 HTML 只是一种描述文档的语言。一旦浏览器读取它，它就消失了。打开标签、关闭标签和格式化都由解析器处理然后离开。任何显示 HTML 的工具都是根据文档的内容生成它，因此它始终有效。

有一次我不得不向另一位 Web 开发人员解释这一点，但他花了一点时间才接受。

您可以在任何 JavaScript 控制台中亲自尝试：

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

未闭合的标签和大写的标签名称都不见了，因为该 HTML 在第二行之后被解析并丢弃。

从 JavaScript 修改文档的正确方法是使用 document 方法（createElement、appendChild、setAttribute 等），您会发现在任何代码中都没有引用标签或 HTML 语法的那些功能。如果您使用 document.write、innerHTML 或其他 HTML 语言调用来修改您的页面，验证它的唯一方法是捕获您放入其中的内容并单独验证该 HTML。

也就是说，获取文档的 HTML 表示的最简单方法是：

document.documentElement.innerHTML

【讨论】：

所以，换个说法，这就像编译一个程序，用一些工具优化或以其他方式修改代码，甚至用病毒感染程序，然后询问结果的源代码.转换 HTML->DOM 是一种单向函数。
+1，天哪，每次修改前后都可以查看代码。很聪明的想法！谢谢
这可能是真的，但并不能完全回答这个问题。将当前操作的 DOM 转换回 HTML 是完全可能的，允许您“查看生成的源”。这有时非常有用，例如，如果您需要根据实际测试工具检查单段 JavaScript。

【解决方案2】：

[更新以响应已编辑问题中的更多细节]

您遇到的问题是，一旦页面被 ajax 请求修改，当前的 HTML 仅存在于浏览器的 DOM 中——除了可以拉取的内容之外，不再有任何可以验证的独立源 HTML DOM 之外。

正如您所观察到的，IE 的 DOM 以大写形式存储标签，修复未闭合的标签，并对最初的 HTML 进行许多其他更改。这是因为浏览器通常非常擅长处理有问题的 HTML（例如未封闭的标签）并修复这些问题以显示对用户有用的内容。据我所知，一旦 HTML 被 IE 规范化，原始源 HTML 从 DOM 的角度来看基本上就丢失了。

Firefox 最喜欢做的这些更改较少，因此 Firebug 可能是您更好的选择。

最后一个（也是更费力的）选项可能适用于具有简单 ajax 更改的页面，例如从服务器获取一些 HTML 并将其导入到特定元素内的页面中。在这种情况下，您可以使用 fiddler 或类似工具手动将原始 HTML 与 Ajax HTML 拼接在一起。这可能比它的价值更麻烦，而且容易出错，但这是一种可能性。

[此处对原始问题的原始回复]

Fiddler (http://www.fiddlertool.com/) 是一个免费的、独立于浏览器的工具，可以很好地获取浏览器接收到的准确 HTML。它向您显示线路上的确切字节以及解码/解压缩/等内容，您可以将其输入任何 HTML 分析工具。它还显示标题、时间、HTTP 状态和许多其他好东西。

如果您想测试服务器如何响应略有不同的标头，您还可以使用 fiddler 复制和重建请求。

Fiddler 充当代理服务器，位于您的浏览器和网站之间，记录双向流量。

【讨论】：

熟悉Fiddler，这不是我想做的事情的简单方法（在用户更改页面后查看生成的页面源）。
他要javascript修改dom后的页面来源。
我不是反对者，但您的回答与问题本身无关。自您发表评论以来，该问题可能已被编辑。
是的，我现在知道了……不过，最初的问题并没有提到那个重要的细节。 :-) 从 OP 获得新信息后，我刚刚更新了我的答案。但我认为我的原始答案是对原始问题的合理回答。尽管这不是最佳答案（我更喜欢被遗忘的分号！），但我想知道是什么让我的答案值得一票否决。没什么大不了的，只是想知道。
感谢您对当前仅存在于浏览器 DOM 中的 HTML 的解释。这是我问题的症结所在，当我问的时候我不明白。这让我相信我所要求的基本上是不可能的。

【解决方案3】：

我知道这是一篇旧帖子，但我刚刚发现了这个piece of gold。这是旧的（2006），但仍然适用于 IE9。我个人为此添加了一个书签。

只需复制粘贴到浏览器的地址栏中即可：

javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))

对于 Firefox，Web 开发工具栏可以完成这项工作。我通常使用它，但有时，一些肮脏的 3rd 方 asp.net 控件会根据用户代理生成不同的标记...

编辑

正如 Bryan 在评论中指出的那样，某些浏览器在 url 栏中复制/粘贴时会删除 javascript: 部分。我刚刚测试过，IE10就是这样。

【讨论】：

哇，这确实是纯金！只需单击书签即可很好地工作。至少，刚才在 Firefox 中是这样的。使用 Chrome，弹出窗口被渲染了——也许它忽略了“text/plain”？
我把它复制粘贴到浏览器的地址栏中，然后回车，没有任何反应
@eMi 我这里有 IE10，它不允许我粘贴 javascript: 部分，我必须手动输入。也许这就是发生的事情。仔细检查粘贴的内容。
在 Mac OSX 上的 Google Chrome（至少从 v44.0.2403.155 开始）上，@Johnny5 的书签不会生成包含开启器源的纯文本页面，但 Chrome 会尝试从外观上呈现 HTML，但没有 CSS。
@Johnny5 可能值得一提，因为javascript: 在某些浏览器中进行复制/粘贴时会被切断。刚刚在 Chrome 中遇到了这个问题。

【解决方案4】：

如果您在 Chrome 中加载文档，Developer|Elements 视图将向您显示由您的 JS 代码处理的 HTML。它不是直接的 HTML 文本，您必须打开（展开）任何感兴趣的元素，但您可以有效地检查生成的 HTML。

【讨论】：

在谷歌浏览器中，在检查元素中，您可以右键单击任何元素并“复制为 HTML”
@Jason 非常感谢您。右键单击元素并选择“复制为 HTML”，这正是我今天在 Chrome 中所需要的。

【解决方案5】：

在 Web 开发人员工具栏中，您是否尝试过 Tools -> Validate HTML 或 Tools -> Validate Local HTML 选项？

Validate HTML 选项将 url 发送到验证器，这适用于面向公众的网站。 Validate Local HTML 选项将当前页面的 HTML 发送到验证器，该验证器适用于登录后的页面或不可公开访问的页面。

您可能还想尝试View Source Chart（也称为FireFox add-on）。有一个有趣的注释：

问。为什么查看源图表将我的 XHTML 标记更改为 HTML 标记？

A.它没有。浏览器正在进行这些更改，VSC 仅显示浏览器对您的代码所做的操作。最常见：自结束标签丢失了结束斜杠 (/)。 See this article on Rendered Source for more information (archive.org).

【讨论】：

我没有投反对票，但“验证 HTML”不会发送生成的 HTML，而是发送原始源。（见编辑过的问题）
我刚试过这个，它似乎没有提交生成的源（即带有DOM更改的源），而是使用firefox的“查看源”选项可以看到的源。
改变我的球门柱！
我认为“查看生成的源代码”会使这部分问题变得清晰，但从目前的 4 个答案来看，我显然错了 :)
查看源图表的链接已损坏

【解决方案6】：

使用 Firefox Web 开发者工具栏 (https://addons.mozilla.org/en-US/firefox/addon/60)

只需转到查看源代码 -> 查看生成的源代码

我一直用它来做同样的事情。

【讨论】：

我现在看到您的编辑，您在工具栏中引用了 Doctype 问题。这是一个公平的批评，我没有其他建议。
效果很好，现在直接内置在原版 Firefox 中。 Ctrl+A，右键，E。另外，看看 Johnny5 发现的优秀书签。
在 Firefox 中：右键单击包含要查看的生成内容的页面，然后 Web Developer > 查看源代码 > 查看生成的源代码

【解决方案7】：

我遇到了同样的问题，我在这里找到了解决方案：

http://ubuntuincident.wordpress.com/2011/04/15/scraping-ajax-web-pages/

所以，要使用 Crowbar，这里的工具：

http://simile.mit.edu/wiki/Crowbar（现在（2015-12）404s）
回程机链接：
http://web.archive.org/web/20140421160451/http://simile.mit.edu/wiki/Crowbar

它给了我错误、无效的 HTML。

【讨论】：

查看本系列的其他部分：Part 2、Part 3。
撬棍似乎不再存在
不太人性化，但还是可以通过SVN下载：devres.zoomquiet.io/data/20110810165553/index.html

【解决方案8】：

这是一个老问题，这是一个老答案，曾经为我完美地工作了很多年，但现在不再是了，至少不像2016 年 1 月：

SquareFree 的“生成的源代码”小书签完全符合您的要求 - 并且与 @Johnny5 的其他精美“旧黄金”不同，它显示为源代码（而不是由浏览器正常呈现，至少在Mac 上的谷歌浏览器案例）：

https://www.squarefree.com/bookmarklets/webdevel.html#generated_source

不幸的是，它的行为就像@Johnny5 中的“旧黄金”：它不再显示为源代码。对不起。

【讨论】：

【解决方案9】：

在 Firefox 中，只需 ctrl-a（选择屏幕上的所有内容），然后右键单击“查看选择源”。这会捕获 JavaScript 对 DOM 所做的任何更改。

【讨论】：

如果页面钩住了右键就不行了。

【解决方案10】：

警报(document.documentElement.outerHTML);

【讨论】：

【解决方案11】：

为什么不输入这是 urlbar？

javascript:alert(document.body.innerHTML)

【讨论】：

+1：在 IE 10 的地址栏中对我不起作用，但在 IE 开发工具的控制台中运行良好。

【解决方案12】：

在元素选项卡中，右键单击 html 节点 > 复制 > 复制元素 - 然后粘贴到编辑器中。

如上所述，一旦源被转换为 DOM 树，原始源就不再存在于浏览器中。您所做的任何更改都将针对 DOM，而不是源。

但是，您可以将修改后的 DOM 解析回 HTML，让您看到“生成的源代码”。

在 Chrome 中，打开开发者工具并点击元素选项卡。
右键单击 HTML 元素。
选择复制 > 复制元素。
粘贴到编辑器中。

您现在可以将当前 DOM 视为 HTML 页面。

这不是完整的 DOM

请注意，DOM 不能完全由 HTML 文档表示。这是因为 DOM 的属性比 HTML 的属性多得多。但是，这将是一项合理的工作。

【讨论】：

【解决方案13】：

查看“查看渲染源”chrome 扩展：

https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/

【讨论】：

这应该是2021年公认的答案

【解决方案14】：

我认为 IE 开发工具 (F12) 有；查看 > 源代码 > DOM（页面）

您需要复制和粘贴 DOM 并将其保存以发送到验证器。

【讨论】：

您可能还想这样做；文件 > 自定义 Internet Explorer 查看源代码 > 记事本，以便在您执行上述操作时轻松保存。

【解决方案15】：

我唯一发现的是 Safari 的 BetterSource 扩展名，这将向您显示文档的操纵源，唯一的缺点是与 Firefox 没有什么相似之处

【讨论】：

【解决方案16】：

下面的 javascript 代码 sn-p 将为您提供完整的 ajax 呈现的 HTML 生成源。浏览器独立之一。享受:)

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one as lower versions of firefox
        //does not support element.outerHTML property
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
  }


 var outerhtml = outerHTML(document.getElementsByTagName('html')[0]);
var node = document.doctype;
var doctypestring="";
if(node)
{
     // IE8 and below does not have document.doctype and you will get null if you access it.

 doctypestring = "<!DOCTYPE "
         + node.name
         + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
         + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
         + (node.systemId ? ' "' + node.systemId + '"' : '')
         + '>';
         }
         else

         {

             // for IE8 and below you can access doctype like this

         doctypestring = document.all[0].text;
         }
doctypestring +outerhtml ;

【讨论】：

我认为这需要关于如何使用它的具体说明。我假设您会将代码粘贴到现有页面中，但输出会去哪里？

【解决方案17】：

我能够通过将 ajax 调用的结果记录到控制台来解决类似的问题。这是返回的 html，我可以很容易地看到它存在的任何问题。

在我的 ajax 调用的 .done() 函数中，我添加了 console.log(results)，因此我可以在调试器控制台中看到 html。

function GetReversals() {
    $("#getReversalsLoadingButton").removeClass("d-none");
    $("#getReversalsButton").addClass("d-none");

    $.ajax({
        url: '/Home/LookupReversals',
        data: $("#LookupReversals").serialize(),
        type: 'Post',
        cache: false
    }).done(function (result) {
        $('#reversalResults').html(result);
        console.log(result);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        //alert("There was a problem getting results.  Please try again. " + jqXHR.responseText + " | " + jqXHR.statusText);
        $("#reversalResults").html("<div class='text-danger'>" + jqXHR.responseText + "</div>");
    }).always(function () {
        $("#getReversalsLoadingButton").addClass("d-none");
        $("#getReversalsButton").removeClass("d-none");
    });
}

【讨论】：

@erbarke，您能否详细说明您的答案并详细说明（代码、详细的操作流程）？