Web Developer 插件強大的功能超乎你的想象，用于CSS網頁布局開發調試只是它強大功能的一部分，對于網絡程序的開發也提供了非常強大的輔助設計功能，我們不將它完全的展開探討，我們僅針對CSS網頁布局開發調試對它進行了解，有興趣的朋友可以詳細的研究一下它的強大功能。

CSS工具　是我們需要了解的重點，它提供了許多功能來輔助我們查看網頁，廢話少說，我們往下深入，看圖片先：

 

1、Disable Style 禁用樣式　　可以用來禁用當前頁面的某些或全部樣式的顯示。

·All Style　　禁用所有樣式，頁面中將沒有任何樣式效果。

·Browser Default Styles　應用瀏覽器默認樣式，意義不大的功能。

·Embedded Styles　禁用放置在頁面中 的內部樣式表，其它無影響。

·Inline Styles　　禁用行間樣式表，即使用style=""形式的將不顯示。

·Linked Style Sheets　　禁用以link標簽鏈接外部樣式表。

·Print Sytles　　禁用打印樣式表。

·Individual Style Sheet　　單獨設置所鏈接的外部樣式表是否顯示。例如：當前頁面鏈接了三個外部樣式表，1.css、2.css、3.css我們可以通過此功能將某一個樣式表禁用。請你注意這個功能其實是非常有用的，可以幫助我們在調試時找到問題是出在哪里，我們禁用某個樣式，看引發的問題是不是依然存在。如果禁用了某一個樣式，問題消失了，那一樣是這個被禁用的樣式表文件中的某些設置出現了問題。

2、Display CSS By Media Type　按媒體的類型顯示樣式。此功能與此類似。不過目前只支持兩種媒體類型：掌上設備、打印。

3、View CSS　用來查看CSS文件代碼，點擊該命令會打開一個新的FF標簽頁，顯示當前頁面的CSS，如果當前頁面Link有多個CSS文件，會給出該文件的URL，或者顯示出此樣式為行間樣式或內部樣式。如下圖：

 

4、View Style Information　查看樣式信息。非常實用的學習與輔助設計功能，在點擊開啟這個選項以后，在FF的狀態欄，會給我當前鼠標所在位置的樣式信息。鼠標停留在某一個元素上時，也會顯示出該元素在當前CSS樣式表中的層次。這個功能可以非常方便的學習別人的CSS網頁布局設計，我們在瀏覽他人的作品里，對某一效果不知道如何實現，我們可以應用這一功能立刻找到所應用的樣式，知道它的層次關系，可以在CSS文件中找到相應的編碼。此功能的效果如下圖：

 

5、Add User Style Sheet　增加用戶樣式。我們可以對當前頁面的樣式設置自己瀏覽時的樣式，網站的當前頁面能夠按自己編寫的樣式來顯示。我們在學習他人的作品時，可以進行舉一反三的改進，或進行其它的優化。我們在設計自己的頁面時，這也可以使我們對文件進行臨時修改，立即查看效果。進行細節的微調與設計。

6、Edit CSS　編輯CSS。這是Web Developer 插件最大的亮點之一，是我們最常用到的功能。點擊這個命令，FF左側打開一個編輯窗口，將已有的CSS樣式已經放置其中了，如果有N個CSS文件組成，會列出標簽式的選項卡，我們可以隨意的切換。顯示出的CSS編輯，我們可以在這個窗口中隨意的更改與編輯，并且右側的網頁將按修改后的樣式實時顯示出來。如果我們改變了h1的樣式，則在右側的網頁窗口中立即可以看到編輯后的效果!如下圖：

 

Web Developer插件的這個功能，我不用多說，大家也可以明白它可以干什么了。我們可以在開發網站時，在查看效果的同時，可以用此功能直接打開CSS文件進行編輯，并隨時掌握修改后的成效，修改滿意了，點擊窗口上方的保存按鈕，可以將當面樣式表保存到指定的位置。真正實現了便捷的輔助設計與開發。我們學習別人的作品，可以用它來查看網頁上的CSS文件，查看別人的編碼，試著修改別人的編碼并可以立即查看到變化后的效果，思考別人為什么這樣寫，為什么這樣進行設置，有什么道理。以此來學習，我們可以更方便的學習優秀網站的CSS技術應用。

7、Use Border Box Model　使用邊框式盒模型，這是一個并不常用的功能，你可以點選此命令查看一下頁面的變化。