在树视图中查看HTML源代码？

Question

我想分析一下我访问过的一些复杂网页的结构。手动解析HTML源代码中的标签很繁琐，容易出错。

我想找到一个接受HTML源（或URL）作为输入的实用程序，并显示HTML元素的层次结构，包括source和id属性，最好是在树视图中。

我有信心找到这样一个工具应该很容易，但是一些谷歌搜索没有为我找到任何东西。我仍然相信这样的工具存在。社区能帮我找点什么吗？ （我是Windows用户，如果可能的话，当然更愿意免费使用。）

Answer 1

IE8 +和Chrome都内置了精彩的开发人员工具。只需访问网页，在IE浏览器中按F12，然后在Chrome中，转到扳手 - >工具 - >开发人员工具。它们都显示页面的树视图，并允许您修改它。他们都非常强大。

Answer 2

大多数浏览器内置了DOM查看器。Firefox有third party extension提供此功能。

这些都将在浏览器执行错误恢复后显示DOM，之后您无法确定是否可以构建有效的

树。

Answer 3

您还可以使用任何优秀的编辑器，如Notepad ++，它突出显示语法和节点折叠。

Answer 4

正如其他人所提到的，大多数现代Web浏览器都内置了“开发人员工具”，其中包括一种在树视图中浏览HTML源代码的方法。我已经整理了前五种浏览器（Internet Explorer 9，Firefox 4，Chrome 12，Opera 11和Safari 5）的最新版本提供的工具的快速屏幕截图比较。

• 的 Web Browser Developer Tools Screenshot Comparison

Answer 5

在firefox上使用firebug或DOMinspector插件。

Answer 6

下载Firefox（http://www.mozilla.org/）并安装 Firebug插件https://addons.mozilla.org/firefox/addon/firebug/）两者都是免费的