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

Question

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

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

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

解决方案

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

score 34 · Accepted Answer

贾斯汀死了。这里的关键是 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

score 32 · Accepted Answer

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

您遇到的问题是，一旦页面被 ajax 请求修改，当前的 HTML 仅存在于浏览器的 DOM 中——除了可以从DOM。

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

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

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

[这里对原始问题的原始回复]

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

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

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

score 21 · Accepted Answer

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

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

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

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

编辑

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

score 12 · Accepted Answer

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

score 11 · Accepted Answer

在 Web Developer Toolbar 中，您是否尝试过Tools -> Validate HTMLorTools -> Validate Local HTML选项？

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

您可能还想尝试查看源图表（也可以作为FireFox 插件）。有一个有趣的注释：

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

答：没有。浏览器正在进行这些更改，VSC 仅显示浏览器对您的代码所做的操作。最常见：自结束标签丢失了结束斜杠 (/)。有关更多信息，请参阅有关渲染源的这篇文章 (archive.org)。

score 6 · Accepted Answer

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

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

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

score 5 · Accepted Answer

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

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。

score 5 · Accepted Answer

这是一个老问题，这是一个老答案，~~多年来对我~~来说一直完美无缺，但至少在 2016 年 1 月不再有效：

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

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

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

score 4 · Accepted Answer

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

score 4 · Accepted Answer

4

警报（document.documentElement.outerHTML）；

于 2013-07-10T12:01:58.873 回答

score 3 · Accepted Answer

3

为什么不输入这是 urlbar？

javascript:alert(document.body.innerHTML)

于 2010-09-27T16:19:45.530 回答

score 3 · Accepted Answer

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

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

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

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

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

这不是完整的 DOM

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

我发现的唯一一件事是 Safari 的BetterSource扩展，这将向您显示文档的操纵源，唯一的缺点是与 Firefox 完全不同

score 1 · Accepted Answer

下面的 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 ;

score 0 · Accepted Answer

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

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

17 回答 17

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

这不是完整的 DOM

Related

Reference