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

Question

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

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

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

解决方案

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

Answer 1

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