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

Question

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

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

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

解决方案

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

Answer 1

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

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

Answer 2

为什么不输入这是网址栏？

javascript:alert(document.body.innerHTML)

Answer 3

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

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

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

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

您现在可以看到当前 DOM 作为 HTML 页面。

这不是完整的 DOM

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

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

您可以在任何 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

Answer 9

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

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

正如您所观察到的，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 充当代理服务器，位于浏览器和网站之间，并记录双向流量。

Answer 10

我知道这是一篇旧帖子，但我刚刚发现了这个一块金子。这是旧的（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 : 复制/粘贴到网址栏中时的部分。我刚刚测试了一下，IE10也是这样。

Answer 11

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

Answer 12

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

验证 HTML 选项将 url 发送到验证器，这对于面向公众的网站效果很好。 验证本地 HTML 选项将当前页面的 HTML 发送到验证器，这对于登录后的页面或不可公开访问的页面非常有效。

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

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

A.事实并非如此。浏览器正在进行这些更改，VSC 仅显示浏览器对您的代码所做的操作。最常见的是：自闭合标签失去了结束斜杠 (/)。 有关详细信息，请参阅这篇有关渲染源的文章 (archive.org)。

Answer 13

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

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

我一直使用它来完成完全相同的事情。

Answer 14

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

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。

Answer 15

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

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

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

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

Answer 16

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

Answer 17

警报（文档.documentElement.outerHTML）；