我正在寻找一种工具，它将为我提供正确的生成源，包括由AJAX请求输入到W3验证器的DOM更改。我尝试了以下方法：
是否有任何程序或附加组件可以为我提供源的确切当前版本，而无需以某种方式修复或更改它？到目前为止，Firebug似乎是最好的，但我担心它可能会解决我的一些错误。
解决方案
事实证明，Justin解释说，我想要的并没有确切的解决方案。最好的解决方案似乎是验证Firebug控制台内部的源代码，即使它包含Firebug引起的一些错误。我还要感谢Forgotten Semicolon解释为什么“View Generated Source”与实际来源不匹配。如果我可以标记2个最佳答案，我愿意。
答案 0 :(得分：34)
贾斯汀已经死了。这里的关键点是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
答案 1 :(得分：32)
[更新以回应编辑过的问题中的更多详情]
您遇到的问题是，一旦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作为代理服务器，位于您的浏览器和网站之间，并记录双向流量。
答案 2 :(得分：21)
我知道这是一篇旧帖子，但我刚发现这个piece of gold。这是旧的（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的情况。
答案 3 :(得分：12)
如果您在Chrome中加载文档，则Developer|Elements视图会向您显示JS代码所示的HTML。它不是直接的HTML文本，你必须打开（展开）任何感兴趣的元素，但你有效地检查生成的HTML。
答案 4 :(得分：11)
在网络开发者工具栏中，您是否尝试过Tools -> Validate HTML或Tools -> Validate Local HTML选项？
Validate HTML选项将网址发送到验证程序，该程序适用于面向公众的网站。 Validate Local HTML选项将当前页面的HTML发送到验证器，该验证器适用于登录后面的页面或不可公开访问的页面。
您可能还想尝试View Source Chart（也称为FireFox add-on）。有趣的是：
Q值。为什么View Source Chart会将我的XHTML标记更改为HTML标记？
一个。它没有。浏览器正在进行这些更改，VSC仅显示浏览器对您的代码所做的操作。最常见的是：自闭标签会丢失其结束斜杠（/）。 See this article on Rendered Source for more information (archive.org)。
答案 5 :(得分：6)
使用Firefox Web开发人员工具栏（https://addons.mozilla.org/en-US/firefox/addon/60）
只需查看来源 - ＆gt;查看生成的源
我一直用它完全一样。
答案 6 :(得分：5)
我遇到了同样的问题，我在这里找到了解决方案：
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。
答案 7 :(得分：5)
这是一个古老的问题，这是一个古老的答案，已经曾经为我做了很多次多年，但现在已经没有了，至少不是2016年1月：
SquareFree的“Generated Source”书签完全符合您的要求 - 而且，与@ Johnny5的其他优质“旧金”不同，它显示为源代码（而不是通过浏览器正常呈现，至少在在Mac上使用Google Chrome的情况：
https://www.squarefree.com/bookmarklets/webdevel.html#generated_source
不幸的是，它的行为就像来自@ Johnny5的“旧金”：它不再显示为源代码。遗憾。
答案 8 :(得分：4)
在Firefox中，只需按ctrl-a（选择屏幕上的所有内容），然后右键单击“查看选择源”。这将捕获JavaScript对DOM所做的任何更改。
答案 9 :(得分：4)
警报（document.documentElement.outerHTML）;
答案 10 :(得分：3)
为什么不输入这个urlbar？
javascript:alert(document.body.innerHTML)
答案 11 :(得分：3)
如上所述，一旦将源转换为DOM树，浏览器中就不再存在原始源。您所做的任何更改都将是DOM，而不是源。
但是，您可以将修改后的DOM解析为HTML，让您看到＆＃34;生成的源＆＃34;。
您现在可以将当前DOM视为HTML页面。
请注意，HTML文档无法完全表示DOM。这是因为DOM具有比HTML具有属性更多的属性。然而，这将做一个合理的工作。
答案 12 :(得分：2)
我认为IE开发工具（F12）有;查看＆gt;来源＆gt; DOM（页面）
您需要复制并粘贴DOM并将其保存以发送给验证器。
答案 13 :(得分：1)
我唯一发现的是Safari的BetterSource扩展名，这将向您显示文档的操作来源，只有下方与Firefox无关，
答案 14 :(得分：1)
以下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 ;
答案 15 :(得分：1)
签出“查看渲染的源代码” chrome扩展程序：
https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/
答案 16 :(得分：0)
我能够通过将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");
});
}