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

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

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

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

火狐最有可能做的改动更少,所以Firebug可能是你最好的选择。

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

[原始问题的原始回复]

Fiddler http://www.fiddlertool.com/ )是一个自由的,独立于浏览器的工具,它可以很好地获取浏览器接收到的HTML。它向您显示网络上的确切字节以及解码/解压/etc内容,您可以将这些内容输入到任何HTML分析工具中。它还显示了头、计时、HTTP状态和许多其他好东西。

如果您想测试服务器如何响应稍微不同的报头,也可以使用fiddler来复制和重建请求。

Fiddler作为代理服务器工作,位于浏览器和网站之间,记录双向的流量。

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

我知道这是一个旧的帖子,但我刚找到这个 piece of gold . 这是旧的(2006年),但仍适用于IE9。我个人用这个加了一个书签。

只需复制粘贴到浏览器的地址栏:

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

至于firefox,web developer工具栏可以完成这项工作。我通常使用这个,但有时一些肮脏的第三方ASP.NET控件会根据用户代理生成不同的标记…

编辑

正如布莱恩在评论中指出的,一些浏览器删除了 javascript: 在URL栏中复制/粘贴时的部件。我刚测试过,IE10就是这样。

如果您使用chrome加载文档, Developer|Elements 视图将显示被JS代码篡改的HTML。它不是直接的HTML文本,您必须打开(展开)感兴趣的任何元素,但是您可以有效地检查生成的HTML。

在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) .

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

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

我总是把它用在同样的事情上。

我也遇到了同样的问题,我在这里找到了一个解决方案:

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

所以,要使用撬棍,这里的工具是:

http://simile.mit.edu/wiki/Crowbar (现在(2015-12)404S)
返回机器链接:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/wiki/Crowbar

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

这是一个古老的问题,这里有一个古老的答案 有 曾经为我完美地工作过 多年来 ,但至少截至2016年1月,不再是:

squarefree中的“生成源”bookmarklet完全符合您的要求,而且不像@johnny5中的“旧黄金”那样,它显示为源代码(而不是通常由浏览器呈现,至少在Mac上是Google Chrome):

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

不幸的是,它的行为就像来自@johnny5的“旧黄金”:它不再显示为源代码。对不起的。

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

警报(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 dev tools(f12)具有;view>source>dom(page)

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

我唯一发现的是 BetterSource 对Safari的扩展这将向您展示文档的被操纵的源代码唯一的缺点是,对于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 ;

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