該插件在火狐瀏覽器中安裝。Web Developer 插件強(qiáng)大的功能超乎你的想象，用于CSS網(wǎng)頁(yè)布局開(kāi)發(fā)調(diào)試只是它強(qiáng)大功能的一部分，對(duì)于網(wǎng)絡(luò)程序的開(kāi)發(fā)也提供了非常強(qiáng)大的輔助設(shè)計(jì)功能，我們不將它完全的展開(kāi)探討，我們僅針對(duì)CSS網(wǎng)頁(yè)布局開(kāi)發(fā)調(diào)試對(duì)它進(jìn)行了解，有興趣的朋友可以詳細(xì)了解

該插件在火狐瀏覽器中安裝。Web Developer 插件強(qiáng)大的功能超乎你的想象，用于CSS網(wǎng)頁(yè)布局開(kāi)發(fā)調(diào)試只是它強(qiáng)大功能的一部分，對(duì)于網(wǎng)絡(luò)程序的開(kāi)發(fā)也提供了非常強(qiáng)大的輔助設(shè)計(jì)功能，我們不將它完全的展開(kāi)探討，我們僅針對(duì)CSS網(wǎng)頁(yè)布局開(kāi)發(fā)調(diào)試對(duì)它進(jìn)行了解，有興趣的朋友可以詳細(xì)的研究一下它的強(qiáng)大功能。

CSS工具　是我們需要了解的重點(diǎn)，它提供了許多功能來(lái)輔助我們查看網(wǎng)頁(yè)，廢話(huà)少說(shuō)，我們往下深入，看圖片先：

1、Disable Style 禁用樣式 可以用來(lái)禁用當(dāng)前頁(yè)面的某些或全部樣式的顯示。

·All Style 禁用所有樣式，頁(yè)面中將沒(méi)有任何樣式效果。

·Browser Default Styles　應(yīng)用瀏覽器默認(rèn)樣式，意義不大的功能。

·Embedded Styles　禁用放置在頁(yè)面中 的內(nèi)部樣式表，其它無(wú)影響。

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

·Linked Style Sheets　　禁用以link標(biāo)簽鏈接外部樣式表。

·Print Sytles　　禁用打印樣式表。

·Individual Style Sheet　　單獨(dú)設(shè)置所鏈接的外部樣式表是否顯示。例如：當(dāng)前頁(yè)面鏈接了三個(gè)外部樣式表，1.css、2.css、3.css我們可以通過(guò)此功能將某一個(gè)樣式表禁用。請(qǐng)你注意這個(gè)功能其實(shí)是非常有用的，可以幫助我們?cè)谡{(diào)試時(shí)找到問(wèn)題是出在哪里，我們禁用某個(gè)樣式，看引發(fā)的問(wèn)題是不是依然存在。如果禁用了某一個(gè)樣式，問(wèn)題消失了，那一樣是這個(gè)被禁用的樣式表文件中的某些設(shè)置出現(xiàn)了問(wèn)題。

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

3、View CSS 用來(lái)查看CSS文件代碼，點(diǎn)擊該命令會(huì)打開(kāi)一個(gè)新的FF標(biāo)簽頁(yè)，顯示當(dāng)前頁(yè)面的CSS，如果當(dāng)前頁(yè)面Link有多個(gè)CSS文件，會(huì)給出該文件的URL，或者顯示出此樣式為行間樣式或內(nèi)部樣式。如下圖：

4、View Style Information 查看樣式信息。非常實(shí)用的學(xué)習(xí)與輔助設(shè)計(jì)功能，在點(diǎn)擊開(kāi)啟這個(gè)選項(xiàng)以后，在FF的狀態(tài)欄，會(huì)給我當(dāng)前鼠標(biāo)所在位置的樣式信息。鼠標(biāo)停留在某一個(gè)元素上時(shí)，也會(huì)顯示出該元素在當(dāng)前CSS樣式表中的層次。這個(gè)功能可以非常方便的學(xué)習(xí)別人的CSS網(wǎng)頁(yè)布局設(shè)計(jì)，我們?cè)跒g覽他人的作品里，對(duì)某一效果不知道如何實(shí)現(xiàn)，我們可以應(yīng)用這一功能立刻找到所應(yīng)用的樣式，知道它的層次關(guān)系，可以在CSS文件中找到相應(yīng)的編碼。此功能的效果如下圖：

5、Add User Style Sheet 增加用戶(hù)樣式。我們可以對(duì)當(dāng)前頁(yè)面的樣式設(shè)置自己瀏覽時(shí)的樣式，網(wǎng)站的當(dāng)前頁(yè)面能夠按自己編寫(xiě)的樣式來(lái)顯示。我們?cè)趯W(xué)習(xí)他人的作品時(shí)，可以進(jìn)行舉一反三的改進(jìn)，或進(jìn)行其它的優(yōu)化。我們?cè)谠O(shè)計(jì)自己的頁(yè)面時(shí)，這也可以使我們對(duì)文件進(jìn)行臨時(shí)修改，立即查看效果。進(jìn)行細(xì)節(jié)的微調(diào)與設(shè)計(jì)。

6、Edit CSS 編輯CSS。這是Web Developer 插件最大的亮點(diǎn)之一，是我們最常用到的功能。點(diǎn)擊這個(gè)命令，FF左側(cè)打開(kāi)一個(gè)編輯窗口，將已有的CSS樣式已經(jīng)放置其中了，如果有N個(gè)CSS文件組成，會(huì)列出標(biāo)簽式的選項(xiàng)卡，我們可以隨意的切換。顯示出的CSS編輯，我們可以在這個(gè)窗口中隨意的更改與編輯，并且右側(cè)的網(wǎng)頁(yè)將按修改后的樣式實(shí)時(shí)顯示出來(lái)。如果我們改變了h1的樣式，則在右側(cè)的網(wǎng)頁(yè)窗口中立即可以看到編輯后的效果！如下圖：

Web Developer插件的這個(gè)功能，我不用多說(shuō)，大家也可以明白它可以干什么了。我們可以在開(kāi)發(fā)網(wǎng)站時(shí)，在查看效果的同時(shí)，可以用此功能直接打開(kāi)CSS文件進(jìn)行編輯，并隨時(shí)掌握修改后的成效，修改滿(mǎn)意了，點(diǎn)擊窗口上方的保存按鈕，可以將當(dāng)面樣式表保存到指定的位置。真正實(shí)現(xiàn)了便捷的輔助設(shè)計(jì)與開(kāi)發(fā)。我們學(xué)習(xí)別人的作品，可以用它來(lái)查看網(wǎng)頁(yè)上的CSS文件，查看別人的編碼，試著修改別人的編碼并可以立即查看到變化后的效果，思考別人為什么這樣寫(xiě)，為什么這樣進(jìn)行設(shè)置，有什么道理。以此來(lái)學(xué)習(xí)，我們可以更方便的學(xué)習(xí)優(yōu)秀網(wǎng)站的CSS技術(shù)應(yīng)用。

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

轉(zhuǎn)載自：<http://www.jb51.net/web/8584.html>

轉(zhuǎn)載于:https://www.cnblogs.com/zhrn/p/4464364.html

總結(jié)

以上是生活随笔為你收集整理的网页设计必备工具 firefox Web Developer插件 CSS工具组教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。