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

我正在寻找一种工具，该工具将为我提供正确的生成源，包括AJAX请求对W3的验证器输入进行的DOM更改。我尝试了以下方法：

1. Web开发人员工具栏-根据doc类型生成无效的源（例如，它删除标记的自闭合部分）。丢失页面的doctype部分。
2. Firebug-修复源代码中的潜在缺陷（例如未关闭的标签）。也丢失标签的doctype部分，并注入本身是无效HTML的控制台。
3. IE开发者工具栏-根据doc类型生成无效的源（例如，根据XHTML规范，使所有标记都变为大写）。
4. 高亮显示+视图选择源-通常很难获取整个页面，也排除了doc类型。

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

解

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

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

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

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

Firefox大多数likley所做的这些更改较少，因此Firebug可能是您更好的选择。

最终的（且劳动强度更大）的选项可能适用于具有简单ajax更改的页面，例如，从服务器获取一些HTML并将其导入到特定元素内的页面中。在这种情况下，您可以使用提琴手或类似工具将原始HTML与Ajax HTML手动缝合在一起。这可能比其应有的麻烦还多，并且容易出错，但这是另一种可能性。

[这里是对原始问题的原始答复]

Fiddler（http://www.fiddlertool.com/）是一个免费的，独立于浏览器的工具，可以很好地获取浏览器接收到的HTML。它显示了线路上的确切字节以及解码/解压缩/等内容，您可以将其提供给任何HTML分析工具。它还显示了标头，计时，HTTP状态以及许多其他有用的东西。

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

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

贾斯汀死了。这里的关键是HTML只是用于描述文档的语言。一旦浏览器读取它，它就消失了。解析器会处理打开标签，关闭标签和格式设置，然后消失。任何显示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

我知道这是一个旧帖子，但是我才发现这块金币。这是旧的（2006），但仍适用于IE9。我个人为此添加了一个书签。

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

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

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

编辑

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

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

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

该Validate HTML选项将URL发送到验证器，该验证器与面向公众的站点配合使用。该Validate Local HTML选项将当前页面的HTML发送到验证器，该验证器可与登录后的页面或不可公开访问的页面配合使用。

您可能还想尝试查看源图表（也可以作为FireFox附加组件）。有趣的是：

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

答：不是。浏览器正在进行这些更改，VSC仅显示浏览器对您的代码所做的工作。最常见：自结束标记会丢失其斜杠（/）。有关更多信息，请参见Rendered Source上的这篇文章 （archive.org）。

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

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

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

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

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/
维基/撬棍

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

这是一个老问题，下面是一个古老的答案已经一次完美为我工作了很多年，但并没有任何更多，至少不会像2016年1月的：

SquareFree的“ Generated Source”书签let完全可以满足您的要求-并且不同于@ Johnny5的其他精美“旧金”，它显示为源代码（而不是由浏览器正常呈现，至少在Google情况下） Mac上的Chrome）：

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

不幸的是，它的行为就像@ Johnny5中的“旧金”一样：它不再显示为源代码。抱歉。

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

alert（document.documentElement.outerHTML）;

为什么不输入网址栏呢？

javascript:alert(document.body.innerHTML)

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

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

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

1. 在Chrome中，打开开发者工具，然后单击元素标签。
2. 右键单击HTML元素。
3. 选择复制>复制元素。
4. 粘贴到编辑器中。

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

这不是完整的DOM

请注意，DOM不能完全由HTML文档表示。这是因为DOM具有比HTML具有的属性更多的属性。但是，这样做会很合理。

我认为IE开发人员工具（F12）拥有；查看>源> DOM（页面）

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

我唯一发现的是Safari的BetterSource扩展，它将向您显示文档的可操纵源，只有缺点与Firefox相似

下面的javascript代码段将为您提供完整的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 ;

查看“查看渲染的源” chrome扩展程序：

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

通过将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");
    });
}