查看生成的网页源的最佳方式？ [英] Best Way to View Generated Source of Webpage?

问题描述

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

1. 网站开发人员工具栏 - 根据文档类型生成无效源文件（例如，删除标签的自封闭部分）。丢失页面的文档类型部分。


2. Firebug - 修复源代码中的潜在缺陷（例如未封闭的标签）。


3. IE开发者工具栏 - 根据文档类型生成无效的源文件（例如，它使所有的标签都为大写，针对XHTML
   
4. 突出显示+视图选择源 - 经常难以获取整个页面，也不包括doc类型。

有没有任何程序或插件可以给我当前版本的源代码，而不需要修改或以某种方式更改它？到目前为止，Firebug看起来是最好的，但我担心它可能会解决我的一些错误。
$ b 解决方案

事实证明，Justin解释说我没有确切的解决方案。最好的解决方案似乎是验证Firebug控制台内部的源代码，尽管它会包含一些由Firebug引起的错误。我还要感谢Forgotten Semicolon解释为什么查看生成的源与实际源不匹配。如果我可以标记2个最佳答案，我会的。

解决方案

[更新以回应编辑问题中的更多细节]

你遇到的问题是，一旦页面被ajax请求修改，当前的HTML只存在于浏览器的DOM内部 -​​ 您不再有任何独立的源代码HTML，您可以验证，而不是您可以从DOM中提取的内容。正如您所看到的，IE的DOM以大写形式存储标签，修复了未封闭的标签，并对原来的HTML做了很多其他的改动。这是因为浏览器通常非常擅长处理带有问题的HTML（例如未封闭的标签）并修复这些问题以显示对用户有用的内容。一旦HTML已被IE规范化，就我所知，原始的源代码HTML基本上从DOM的角度来说已经不存在了。

Firefox最可能减少这些更改，所以Firebug可能是你最好的选择。

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

[原始回答原始问题]

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

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

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

I'm looking for a tool that will give me the proper generated source including DOM changes made by AJAX requests for input into W3's validator. I've tried the following methods:

1. Web Developer Toolbar - Generates invalid source according to the doc-type (e.g. it removes the self closing portion of tags). Loses the doctype portion of the page.
2. Firebug - Fixes potential flaws in the source (e.g. unclosed tags). Also loses doctype portion of tags and injects the console which itself is invalid HTML.
3. IE Developer Toolbar - Generates invalid source according to the doc-type (e.g. it makes all tags uppercase, against XHTML spec).
4. Highlight + View Selection Source - Frequently difficult to get the entire page, also excludes doc-type.

Is there any program or add-on out there that will give me the exact current version of the source, without fixing or changing it in some way? So far, Firebug seems the best, but I worry it may fix some of my mistakes.

Solution

It turns out there is no exact solution to what I wanted as Justin explained. The best solution seems to be to validate the source inside of Firebug's console, even though it will contain some errors caused by Firebug. I'd also like to thank Forgotten Semicolon for explaining why "View Generated Source" doesn't match the actual source. If I could mark 2 best answers, I would.

解决方案

[updating in response to more details in the edited question]

The problem you're running into is that, once a page is modified by ajax requests, the current HTML exists only inside the browser's DOM-- there's no longer any independent source HTML that you can validate other than what you can pull out of the DOM.

As you've observed, IE's DOM stores tags in upper case, fixes up unclosed tags, and makes lots of other alterations to the HTML it got originally. This is because browsers are generally very good at taking HTML with problems (e.g. unclosed tags) and fixing up those problems to display something useful to the user. Once the HTML has been canonicalized by IE, the original source HTML is essentially lost from the DOM's perspective, as far as I know.

Firefox most likley makes fewer of these changes, so Firebug is probably your better bet.

A final (and more labor-intensive) option may work for pages with simple ajax alterations, e.g. fetching some HTML from the server and importing this into the page inside a particular element. In that case, you can use fiddler or similar tool to manually stitch together the original HTML with the Ajax HTML. This is probably more trouble than it's worth, and is error prone, but it's one more possibility.

[Original response here to the original question]

Fiddler (http://www.fiddlertool.com/) is a free, browser-independent tool which works very well to fetch the exact HTML received by a browser. It shows you exact bytes on the wire as well as decoded/unzipped/etc content which you can feed into any HTML analysis tool. It also shows headers, timings, HTTP status, and lots of other good stuff.

You can also use fiddler to copy and rebuild requests if you want to test how a server responds to slightly different headers.

Fiddler works as a proxy server, sitting in between your browser and the website, and logs traffic going both ways.

这篇关于查看生成的网页源的最佳方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！