作為一個(gè)webdesigner（網(wǎng)站設(shè)計(jì)師），你應(yīng)該注意到了國(guó)外主流瀏覽器Firefox。如果你還沒有使用Firefox，您可以現(xiàn)在去下載它。火狐除了提供網(wǎng)頁瀏覽體驗(yàn)之外，而且還提供了一個(gè)功能，是其他任何瀏覽器無法媲美的。那就是第三方開發(fā)的附加組件工具可以根據(jù)不同愛好和需求安裝加載在Firefox瀏覽器中，大大提高您的工作效率并節(jié)省您的時(shí)間，

目前Firefox的附加組件達(dá)到成百上千個(gè)，有的幫助您瀏覽被屏蔽的網(wǎng)站，有的幫助您下載隱藏文件，有的幫助您實(shí)現(xiàn)網(wǎng)站窗口單一化和自動(dòng)翻頁等等，既然有這么多不同功能的組件可以下載，我們今天介紹6種針對(duì)網(wǎng)站設(shè)計(jì)師需要的組件。

Web Developer

雖然被稱為 Web Developer，但是這一Firefox附加組件對(duì)于網(wǎng)頁設(shè)計(jì)師來說絕對(duì)是非常寶貴的。

如果你添加安裝完畢此組件，網(wǎng)站設(shè)計(jì)人員會(huì)發(fā)現(xiàn)有用的是CSS菜單。這個(gè)菜單的功能包括顯示CSS是否出錯(cuò)，查看CSS，編輯和加入自定義樣式信息。另外 1個(gè)特點(diǎn)是圖像菜單。可以查看ALT屬性，圖像尺寸，圖像文件大小和圖像的路徑，您可以禁用圖像，找到無效的圖像，ALT屬性替換圖像等一些額外的功能。

Firebug

盡管Web Developer是我們第一推薦， Firebug 緊隨其后也是我們要重點(diǎn)推薦的。

有了Firebug的，你可立即編輯，調(diào)試和監(jiān)測(cè)任何網(wǎng)頁。Firebug可以讓你對(duì)任何網(wǎng)頁CSS，HTML和JavaScript完全控制。最棒的是，您調(diào)試的每個(gè)不同的變化，都可以立即看到效果。

像大多數(shù)好的Firefox插件一樣，F(xiàn)irebug 也有增值服務(wù)可以選擇，這樣用戶可以使用一些額外的功能。

Colorzilla

作為一個(gè)網(wǎng)頁設(shè)計(jì)師，當(dāng)您在網(wǎng)上沖浪的時(shí)候，你永遠(yuǎn)不知道什么時(shí)候靈感會(huì)打動(dòng)你。比如，您可能會(huì)看一個(gè)網(wǎng)站的色彩，你真的很喜歡。

如果你想快速，有效的抓出這些色彩，你應(yīng)該安裝 ColorZilla 附加組件。

ColorZilla附加功能的在線滴管，這使得它非常簡(jiǎn)單的抓取顏色精確值。除了在線滴管，ColorZilla提供多種附加功能，大部分的網(wǎng)頁設(shè)計(jì)師會(huì)找到有用的，如 DOM的色彩分析儀和在線配色等。

FireShot

雖然你的操作系統(tǒng)具有內(nèi)置的屏幕捕捉功能，但這并不意味著默認(rèn)的屏幕捕獲符合您實(shí)際需要的情況，比如一般都抓一屏，如果網(wǎng)站很長(zhǎng)就要抓很多次，還是斷開的，而且所抓取的內(nèi)容還包括瀏覽器窗口。

幸運(yùn)的是，F(xiàn)ireshot插件，提供只抓去瀏覽器以內(nèi)的網(wǎng)頁功能，連同其他有用的多種功能。

FireShot的是一種先進(jìn)的Firefox屏幕捕獲附件組件。除了讓您能夠捕獲整個(gè)網(wǎng)頁（即使網(wǎng)頁不是作為對(duì)您的瀏覽器窗口的限制而導(dǎo)致的不可見部分），F(xiàn)ireShot的還可以直接在屏幕捕獲后添加注釋。

FireShot 讓您在屏幕捕獲后保存上有多種選擇。他們不僅可以被保存為不同的文件格式，但也可以保存到本地計(jì)算機(jī)，或服務(wù)器網(wǎng)絡(luò)。目前，因?yàn)檫@功能，這個(gè)附加已吸引了超過15.0萬活躍用戶，并已證明是網(wǎng)頁設(shè)計(jì)人員和其他互聯(lián)網(wǎng)專業(yè)人士的摯愛。

CSS驗(yàn)證器/HTML Validator

作為設(shè)計(jì)師，你要確保你的網(wǎng)站作品，都可以很容易在任何電腦和平臺(tái)上顯示和展示。首先就是確保這CSS和HTML代碼的W3C驗(yàn)證。

無論是 CSS驗(yàn)證器還是HTML驗(yàn)證 當(dāng)我們安裝了CSS驗(yàn)證器/HTML Validator這個(gè)組件以后，可以在瀏覽器上一點(diǎn)，就會(huì)進(jìn)入驗(yàn)證頁面，根據(jù)驗(yàn)證結(jié)果調(diào)整自己的網(wǎng)站。

Window Resizer的瀏覽器

互聯(lián)網(wǎng)，最令網(wǎng)頁設(shè)計(jì)師沮喪的問題之一，就是我們所設(shè)計(jì)的網(wǎng)站，需要在不同屏幕尺寸下顯示。

因?yàn)槟悴恢赖脑L問者的瀏覽器分辨率是640 × 480，800 × 600，1024 × 768，1280 × 1024或1600 × 1200，所以我們必須解決不同分辨率網(wǎng)站顯示的問題。

我發(fā)現(xiàn)安裝 Window Resizer附加組件，是最有效的方式來完成這項(xiàng)任務(wù)。一旦您下載并安裝此插件，您可以按照上述尺寸查看自己的網(wǎng)頁在不同分辨率下的表現(xiàn)。

我們可以通過調(diào)試去解決大部分分辨率下的展示問題。

1. Web Developer Toolbar 

功能非常強(qiáng)大，是做網(wǎng)頁設(shè)計(jì)師的必備工具。 

2. CssViewer 

可以在網(wǎng)頁中查看某個(gè)區(qū)域的CSS， 我常常用它研究一些特別的效果是如何做出來的。 

3. Firebug 

用來調(diào)試網(wǎng)頁，如果HTML，CSS或者JS出錯(cuò)，它會(huì)有對(duì)應(yīng)提示。 

4. IEtab 

在FF切換到IE，省去再打開一個(gè)IE瀏覽器的麻煩。對(duì)于測(cè)試頁面在各種瀏覽器的兼容時(shí)特別有用。 

5. X-ray 

名副其實(shí)的插件-> X射線，使用了之后直接在頁面中查看網(wǎng)頁對(duì)應(yīng)結(jié)構(gòu)，比較直觀，而不需要查看源代碼，這個(gè)插件和CSSViewer配合特別有用。 

6. FasterFox 

提升FF性能的工具，我用來測(cè)試頁面的載入時(shí)間。 

7. HTML Validator 

校驗(yàn)XHTML是否標(biāo)準(zhǔn)，雖然比不上W3C的validator, 但是對(duì)于一般應(yīng)用而言已經(jīng)足夠。 

8. ColorZilla 

截取網(wǎng)頁的配色工具。 

9. MeasureIT 

尺子，量取頁面的某個(gè)區(qū)域的大小。