查看頁面大綱

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路徑。

這聽起來像輪廓塊元素將是你在找什麼。