查看页面大纲

Question

有没有一种工具可以查看浏览器中浏览的整个页面？例如，我有很多隐藏的div或图像，可能会被其他元素淹没，我想查看所有的元素，只是看看在什么地方放置了什么。如果您曾经使用过Adobe Illustrator，那么您可以理解我的意思，如果您通过单击CTRL + Y切换到轮廓模式。我现在使用FireBug来做类似的事情，但可能会有更进一步的东西呢？

Answer 1

尝试使用Web Developer add-on for Firefox。

它有很多这种东西的工具。虽然并不完全像Illustrator中的大纲模式。

Answer 2

IE8开发工具有一个“显示所有DIV元素”选项。按F-12打开开发人员工具窗口。

Answer 3

我喜欢Firefox的Firebug插件。 Firebug允许你浏览页面，并且它会突出显示你选择的元素。这是一个非常强大的工具，它可以很容易地看到你的网站如何挂在一起。另外它内置了大量其他调试工具。如果你正在开发网站，你应该使用Firebug。

也有类似的工具可用于其他浏览器。最近的IE版本内置了“开发者工具”，虽然它不像Firebug那么容易使用或者功能强大。 Chrome和Safari也有一个开发者工具功能，功能非常强大。我个人更喜欢Firebug，但它们都是有用的工具。

希望有所帮助。

Answer 4

fire-fox上的Web开发人员对我非常有帮助。我特别喜欢大纲块元素，这些元素对我构建声音结构很有帮助，并查看我的元素在排队时的排列方式，以及查看样式信息，以便将鼠标悬停在所有元素上并查看css路径。

这听起来像轮廓块元素将是你在找什么。