我們將在本文中介紹一些關于頁面構建常用的一些小工具，大部分是基于firefox的插件，通過這些小工具可以讓我們在頁面構建中事半功倍。
頁面構建必備工具 — Firebug
相信每個頁面構建的同學都有這個工具吧？如果沒有的話，你趕緊安裝（點擊此處安裝），Firebug就像它的名字一樣，幫你找到蟲子，燒掉它！同時有一些firefox的頁面調試工具也是基于Firebug的，比如Yslow ， CSS Usage
網頁測量利器– MeasureIt
當我們拿到一個設計稿，寫完基本的結構后，我們的測量工具可能就開始了，那些間距高度寬度對齊，就需要一把好尺子來協助我們了，這里我像大家推薦 MeasureIt Firefox點擊安裝，通過這把尺子，我們就能很方便的進行一些測量對齊工作，但是這個工具的缺陷是由于那個尺子的邊框，我們不容易達到像素級的標準，那我們就需要下面將要介紹的工具 Pixel perfect
實時顏色選取工具–Colorzilla
將版式調整好后的任務應該就是處理顏色方面的問題，通常我們會將其放到ps等圖片編輯軟件中來查看相應的色值，如果有了Colorzilla，我們就能更直觀的使用顏色，特別是有時候我們用文本編輯軟件編寫CSS色值的時候，我們甚至可以將設計稿直接拖到瀏覽器里面直接去想要位置的顏色，而且支持 RGB，RGBa，HSL，十六進制，可以直接復制。同時這個軟件還提供了色板和漸變生成工具。點擊此處立刻體驗
檢查網頁的相關信息–Web Developer
一個頁面相關信息的集大成者，任何關于網頁前端的信息你都能從里面找到，我們可以很方便的查看網頁的大綱、無CSS，查看DOM節點等。只要你想，基本都有了。
讓你的CSS更瘦一些 — CSS usage
隨著產品經理一遍遍的調整產品，你是不是也感覺你的css文件慢慢變胖，但是又不敢輕易刪掉一些樣式，因為你不知道它們是不是被用到過，那就讓下面的CSSUsage來幫你。
通過檢查class名稱使用情況，來查看頁面中的CSS信息，從而方便開發者優化CSS樣式表。
可顯示4類信
Seen css中當頁所使用的class
Seen before 此class曾經出現在此網站的其他網頁，當然是在已經瀏覽過其他網頁的情況下
Unseen css中的class，此頁面并未使用過
：hover 偽類信息
網頁評級工具–Yslow
Yslow是基于firebug的一個網頁評級工具，它根據Yahoo用戶體驗部門訂制的34條可能對網頁前段表現產生影響的規則，這些規則中有23條可以通過這個工具來測試。即使我們不使用這個工具，了解這些規則也是很不錯的。
網頁截圖存儲工具 –Pearl crescent page saver basic
Page Saver可以將網頁轉化為圖片，包括網頁上的Flash也能同時被轉化。網頁可以按照你的要求保存為PNG或者JPEG格式。可以將整個網頁或者在屏幕上看到的部分轉化為圖片。為了方便截取網頁，插件提供了大量的設置選項，包括默認的文件名、文件后綴名、圖片的質量。可以通過工具欄按鈕截取圖片，也可以通過瀏覽器的菜單選項截取圖片，還可以通過命令行截取圖片。
當前可見區域保存為圖片：
將整個頁面保存為圖片
HTML頁面與設計稿像素級比對工具–Pixel perfect
可以將設計師的設計圖通過此插件作為蒙版加載到瀏覽器上，通過調節圖片的透明度以及位置，可以進行設計稿與頁面的細節比對，來優化提高頁面樣式的精確度。
先將設計稿添加到需要對比的頁面中來：
讓圖片顯示：
可以通過調整透明度和具體坐標位置來重合圖片和網頁，然后對樣式進行修正。