我正在寻找一种工具,它将为我提供正确的生成源,包括由AJAX请求输入到W3验证器的DOM更改.我尝试了以下方法:
Web Developer Toolbar - 根据doc-type生成无效的源(例如,它删除了标签的自关闭部分).丢失页面的doctype部分.
Firebug - 修复源中的潜在缺陷(例如未封闭的标签).还丢失标签的doctype部分并注入本身无效的HTML控制台.
IE Developer Toolbar - 根据doc-type生成无效的源(例如,它使所有标签都是大写的,针对XHTML规范).
突出显示+查看选择源 - 经常难以获得整个页面,也不包括doc-type.
是否有任何程序或附加组件可以为我提供源的确切当前版本,而无需以某种方式修复或更改它？到目前为止,Firebug似乎是最好的,但我担心它可能会解决我的一些错误.
解
事实证明,Justin解释说,没有确切的解决方案.最好的解决方案似乎是验证Firebug控制台内部的源代码,即使它包含Firebug引起的一些错误.我还要感谢Forgotten Semicolon解释为什么"View Generated Source"与实际来源不匹配.如果我可以标记2个最佳答案,我会的.
贾斯汀已经死了.这里的关键点是HTML只是一种描述文档的语言.一旦浏览器读取它,它就消失了.开放标签,关闭标签和格式化都由解析器处理,然后消失.任何向您显示HTML的工具都是根据文档的内容生成它,因此它始终有效.
我不得不向其他网络开发者解释一次,并且花了一点时间让他接受它.
您可以在任何JavaScript控制台中自行尝试:
el = document.createElement('div');
el.innerHTML = "Some text
More text";
el.innerHTML; //
Some text
More text
未关闭的标签和大写标签名称消失了,因为HTML在第二行之后被解析并丢弃.
修改从JavaScript文件正确的方法是用document方法(createElement,appendChild,setAttribute等),你会观察到有任何的那些功能标签或HTML语法没有提及.如果您正在使用document.write, innerHTML或其他HTML语言调用来修改您的页面,验证它的唯一方法是捕获您放入它们的内容并单独验证该HTML.
也就是说,获取文档的HTML表示的最简单方法是:
document.documentElement.innerHTML
[更新以回应编辑问题中的更多细节]
您遇到的问题是,一旦页面被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作为代理服务器,位于浏览器和网站之间,并记录双向流量.
我知道这是一个老帖子,但我刚发现这块金子.这是旧的(2006年),但仍然适用于IE9.我个人添加了一个书签.
只需将其粘贴到浏览器的地址栏中即可:
javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))
至于firefox,web开发者工具栏可以完成这项工作.我通常使用它,但有时,一些脏的第三方asp.net控件会根据用户代理生成不同的标记...
编辑
正如Bryan在评论中所指出的,一些浏览器javascript:在url栏中复制/粘贴时删除了该部分.我刚刚测试过IE10的情况.
如果您在Chrome中加载文档,该Developer|Elements视图将向您显示由JS代码设置的HTML.它不是直接的HTML文本,你必须打开(展开)任何感兴趣的元素,但你有效地检查生成的HTML.
在Web Developer Toolbar中,您是否尝试过Tools -> Validate HTML或Tools -> Validate Local HTML选项？
该Validate HTML选项将url发送到验证器,该验证器适用于面向公众的站点.该Validate Local HTML选项将当前页面的HTML发送到验证器,该验证器适用于登录后面的页面或不可公开访问的页面.
您可能还想尝试查看源图表(也作为FireFox附加组件).有趣的是:
问:为什么View Source Chart会将我的XHTML标记更改为HTML标记？
答:事实并非如此.浏览器正在进行这些更改,VSC仅显示浏览器对您的代码所做的操作.最常见的是:自闭标签会丢失其结束斜杠(/).有关更多信息,请参阅有关渲染源的这篇文章 (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)404)
Wayback机器链接:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/维基/撬棍
它给了我错误的无效HTML.
这是一个老问题,下面是一个古老的答案已经一次工作得十分完美,我很多年,但并没有任何更多,至少不会像2016年1月的:
来自SquareFree的"Generated Source"书签完全符合您的要求 - 而且,与@ Johnny5的其他优质"旧金"不同,它显示为源代码(而不是通过浏览器正常呈现,至少在Google的情况下) Mac上的Chrome):
https://www.squarefree.com/bookmarklets/webdevel.html#generated_source
不幸的是,它的行为就像来自@ Johnny5的"旧金":它不再显示为源代码.抱歉.
京公网安备 11010802040832号 | 京ICP备19059560号-6 
