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

Best Way to View Generated Source of Webpage?

提问by Jeremy Kauffman

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:

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

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.

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

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.

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

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.

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

采纳答案by Justin Grant

[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.

您遇到的问题是，一旦页面被 ajax 请求修改，当前的 HTML 仅存在于浏览器的 DOM 中——除了可以从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.

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

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

Firefox 最有可能做出的这些更改较少，因此 Firebug 可能是您更好的选择。

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.

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

[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.

Fiddler ( http://www.fiddlertool.com/) 是一个免费的、独立于浏览器的工具，它可以很好地获取浏览器接收到的确切 HTML。它向您显示线路上的确切字节以及解码/解压缩/等内容，您可以将这些内容输入任何 HTML 分析工具。它还显示标头、时间、HTTP 状态和许多其他好东西。

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

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

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

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

回答by s4y

Justin is dead on. The key point here is that HTML is just a language for describing a document. Once the browser reads it, it's gone. Open tags, close tags, and formatting are all taken care of by the parser and then go away. Any tool that shows you HTML is generating itbased on the contents of the document, so it will always be valid.

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

I had to explain this to another web developer once, and it took a little while for him to accept it.

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

You can try it for yourself in any JavaScript console:

您可以在任何 JavaScript 控制台中亲自尝试：

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

The un-closed tags and uppercase tag names are gone, because that HTML was parsed and discarded after the second line.

未关闭的标签和大写的标签名称都消失了，因为该 HTML 在第二行之后被解析和丢弃。

The right way to modify the document from JavaScript is with documentmethods (createElement, appendChild, setAttribute, etc.) and you'll observe that there's no reference to tags or HTML syntax in any of those functions. If you're using document.write, innerHTML, or other HTML-speaking calls to modify your pages, the only way to validate it is to catch what you're putting into them and validate that HTML separately.

从 JavaScript 修改文档的正确方法是使用document方法（createElement、appendChild、setAttribute等），您会发现在任何这些函数中都没有对标签或 HTML 语法的引用。如果您使用document.write、 innerHTML或其他 HTML 调用来修改您的页面，验证它的唯一方法是捕获您放入它们的内容并单独验证该 HTML。

That said, the simplest way to get at the HTML representation of the document is this:

也就是说，获取文档的 HTML 表示的最简单方法是：

document.documentElement.innerHTML

回答by Johnny5

I know this is an old post, but I just found this piece of gold. This is old (2006), but still works with IE9. I personnally added a bookmark with this.

我知道这是一个旧帖子，但我刚刚发现了这块金子。这是旧的（2006），但仍然适用于 IE9。我亲自添加了一个书签。

Just copy paste this in your browser's address bar:

只需将其复制粘贴到浏览器的地址栏中：

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

As for firefox, web developper tool bar does the job. I usually use this, but sometimes, some dirty 3rd party asp.net controls generates differents markups based on the user agent...

至于 Firefox，Web 开发人员工具栏可以完成这项工作。我通常使用它，但有时，一些肮脏的 3rd 方 asp.net 控件会根据用户代理生成不同的标记...

EDIT

编辑

As Bryan pointed in the comment, some browser remove the javascript:part when copy/pasting in url bar. I just tested and that's the case with IE10.

正如 Bryan 在评论中指出的那样，某些浏览器javascript:在 url 栏中复制/粘贴时删除了该部分。我刚刚测试过，IE10 就是这种情况。

回答by Carl Smotricz

If you load the document in Chrome, the Developer|Elementsview will show you the HTML as fiddled by your JS code. It's not directly HTML text and you have to open (unfold) any elements of interest, but you effectively get to inspect the generated HTML.

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

回答by Forgotten Semicolon

In the Web Developer Toolbar, have you tried the Tools -> Validate HTMLor Tools -> Validate Local HTMLoptions?

在 Web Developer Toolbar 中，您是否尝试过Tools -> Validate HTML或Tools -> Validate Local HTML选项？

The Validate HTMLoption sends the url to the validator, which works well with publicly facing sites. The Validate Local HTMLoption sends the current page's HTML to the validator, which works well with pages behind a login, or those that aren't publicly accessible.

该Validate HTML选项将 url 发送到验证器，这适用于面向公众的网站。该Validate Local HTML选项将当前页面的 HTML 发送到验证器，该验证器适用于登录后的页面或不可公开访问的页面。

You may also want to try View Source Chart(also as FireFox add-on). An interesting note there:

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

Q. Why does View Source Chart change my XHTML tags to HTML tags?

A. It doesn't. The browser is making these changes, VSC merely displays what the browser has done with your code. Most common: self closing tags lose their closing slash (/). See this article on Rendered Source for more information(archive.org).

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

答：没有。浏览器正在进行这些更改，VSC 仅显示浏览器对您的代码所做的操作。最常见的是：自结束标签丢失了它们的结束斜线 (/)。有关详细信息，请参阅有关 Rendered Source 的这篇文章(archive.org)。

回答by lewsid

Using the Firefox Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60)

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

Just go to View Source -> View Generated Source

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

I use it all the time for the exact same thing.

我一直将它用于完全相同的事情。

回答by adamvagyok

I had the same problem, and I've found here a solution:

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

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

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

So, to use Crowbar, the tool from here:

所以，要使用 Crowbar，这里的工具：

http://simile.mit.edu/wiki/Crowbar(now (2015-12) 404s)
wayback machine link:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/wiki/Crowbar

http://simile.mit.edu/wiki/Crowbar（现在（2015-12）404s）
回程机链接：http://web.archive.org/web/20140421160451/http://simile.mit.edu/
维基/撬棍

It gave me the faulty, invalid HTML.

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

回答by Dave Land

This is an old question, and here's an old answer that hasonce worked flawlessly for mefor many years, but doesn't any more, at least not as of January 2016:

这是一个古老的问题，这里有一个旧的答案，它曾经为我完美地工作了很多年，但现在不再如此，至少在 2016 年 1 月不是这样：

The "Generated Source" bookmarklet from SquareFree does exactly what you want -- and, unlike the otherwise fine "old gold" from @Johnny5, displays as source code (rather than being rendered normally by the browser, at least in the case of Google Chrome on Mac):

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

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

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

Unfortunately, it behaves just like the "old gold" from @Johnny5: it does not show up as source code any more. Sorry.

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

回答by JohnnyFaldo

alert(document.documentElement.outerHTML);

警报（document.documentElement.outerHTML）；

回答by Mike_K

In Firefox, just ctrl-a (select everything on the screen) then right click "View Selection Source". This captures any changes made by JavaScript to the DOM.

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