通過適當的配置, Firefox 可以變成一個超級網頁設計工具, 讓你能夠實時設計網頁樣式,測試Javascript以及編輯HTMl文件.我們只需要安裝以下擴展就可以實現豐富多樣的網頁編輯功能.??

?

重要: 因為我們平時用不到這些擴展,所以最好建立一個獨立的Firefox配置文件,這樣就不會影響到常規使用時的速度了.

一.創建一個獨立的Firefox配置文件.

創建多個配置文件的好處在于可以打造多個為某個目的專用的Firefox,同時也適合于多用戶共享電腦,所以下面的方法不僅限于本文的目的.

1.開始–運行,輸入 firefox.exe -profilemanager ,啟動Firefox用戶配置文件向導.如果你的Firefox并未安裝在默認目錄下,這條命令應改為 firefox所在路徑\firefox.exe -profilemanager .

2.點擊創建配置文件,創建一個新用戶,并為該用戶取一個你自己喜歡的名字.創建后退出.如圖所示,我的新建用戶為Webdev(Web Development).

3.為新配置文件創建圖標.復制桌面上的Firefox圖標,并直接粘貼在桌面上,右鍵點擊該圖標,選擇屬性,在目標一欄的文字后面添加:

-P PROFILENAME -no-remote

其中PROFILENAME為你自己設定的配置文件名稱. -no-remote 是為了能夠讓不同配置文件的Firefox同時運行.

?

這樣,這個名為Webdev配置文件就能獨立于原來的那個之外使用了,所有的配置,包括擴展,書簽,主題都是全新的.

二.必備的網頁設計擴展

1. FireBug

Firebug是測試Javascript,查看CSS和HTML的絕佳工具.你可以在修改代碼后立即測試頁面的變化.

點擊下載 ??

2. Web Developer Extension

這個擴展是我最早聽說也是最常用的一個網頁設計擴展,當時修改模板的時候起了很大作用.它幾乎囊括了網頁設計的所有元素,主要作用在于監測和查看代碼.

點擊下載

3. Aardvark Extension

這個輕量級擴展可以簡單地顯示網頁元素的Class和ID,當你只想快速獲得某個元素的信息時非常有用,你還可以通過它移除網頁上的元素.

點擊下載

4. Colorzilla

直接從網頁上獲取色彩代碼和RGB信息,相當于圖像編輯軟件里的拾色器.

點擊下載

5. View Source With

使用多種外部軟件查看網頁代碼.

點擊下載

6. HTML Validator

快速驗證HTML代碼的合法性.

Windows平臺下載

Linux平臺下載

7. Measure It

距離測量工具.

點擊下載

8. IE View ?/ IE Tab ?/ OperaView ?/ FirefoxView ?/ Safari View ?/ IE View Lite

在Firefox中調用其他瀏覽器渲染網頁.測試網頁的兼容性時很有用.

9. Clear Cache Button

清除網頁緩存,檢查CSS更改時非常有用.

點擊下載

10. Restart Firefox

在不損壞當前標簽和進程的情況下重啟Firefox.

點擊下載

11. Tab Mix Plus

盡管這是一個常規擴展,但是復制標簽和復制標簽鏈接功能對網頁設計很有作用.

點擊下載

12. YSlow

Yslow是雅虎新近出品的一個網頁分析工具.它能夠給你提供網頁錯誤信息以及網頁優化建議.必須安裝Firebug后才能使用該擴展.

點擊下載

讓Firefox變成終極網頁設計工具