網頁制作poluoluo文章簡介:大多數網頁設計師與前端工程師都會使用Firefox(火狐浏覽器),由於Firefox豐富的Web開發輔助插件可以為我們提供許多好的功能,比如HTML,CSS,JS查錯,找BUG等等。因此這裡整理了目前常用的一些Firefox Web開發插件。
大多數網頁設計師與前端工程師都會使用Firefox(火狐浏覽器),由於Firefox豐富的Web開發輔助插件可以為我們提供許多好的功能,比如HTML,CSS,JS查錯,找BUG等等。因此這裡整理了目前常用的一些Firefox Web開發插件。
開發工具
1. Web Developer 1.1.8
https://addons.mozilla.org/en-US/firefox/addon/60
以工具欄的形式對網頁的(X)HTML、腳本、多媒體、CSS、緩存、圖象等多方面的實用工具。使我們能輕易的獲得網頁的更多信息,使我們進一步的了解當 前所浏覽的網頁。
說明:超強的web分析工具,開發人員必裝。
2. Firebug 1.5.0
https://addons.mozilla.org/en-US/firefox/addon/1843
Firebug是firefox下的一個插件,能夠調試所有網站語言,如Html,Css等,但FireBug最吸引我的就是javascript調試 功能,使用起來非常方便,而且在各種浏覽器下都能使用(IE,Firefox,Opera, Safari),簡直難以置信。除此之外,其他功能還很強大。比如html,css,dom的察看與調試,網站整體分析等等。總之就是一整套完整而強大的 WEB開發工具。
說明:查看,編輯,Debug頁面的CSS,HTML,JavaScript。超強的開發調試的工具,開發人員必裝。
3. LinrLightWeb 0.2.1
https://addons.mozilla.org/zh-CN/firefox/addon/14068
安裝前,請確認您已安裝Firebug插件,獲取Firebug請訪問:http://getfirebug.com/
1. 開啟網頁編輯模式,隨意編輯網頁——Fiddler的好搭檔;
2. 超強Selector,查找操作標記;
3. 刷新CSS,無需刷新整頁;
4. 快速設置CSS Sprites背景,鼠標拖移即可得到位置;
5. 保持登錄狀態,Session不過期;禁用
6. 同步發行IE版,Chrome版。
說明:非常強的web開發工具。
4. View Source Char 2.7
https://addons.mozilla.org/en-US/firefox/addon/655
畫一個 Color-Coded 的圖表的 Web 頁的源代碼。
說明:顯示非常好看的源碼, 分級縮進, 不同顏色區分。
5. Tamper Data 11.0.0
https://addons.mozilla.org/en-US/firefox/addon/966
Tamper Data 的真實含義,即“篡改數據”(或者說定制 HTTP 請求):截取浏覽器發出的每一個 HTTP 請求,提示我們選擇是要進行定制,還是不做定制而直接提交請求,還是終止當前被截取的請求,然後根據我們的選擇決定是打開定制窗口,還是直接向 WEB 服務器提交請 求,還是終止當前的請求。
說明:查看 firefox 收發請求的 header, 特別是在發出請求前, 可以修改 header。
6. JavaScript Debuger 0.9.87.4
https://addons.mozilla.org/en-US/firefox/addon/216
Venkman 作為Mozilla的調試器,是針對Mozilla(Firefox)的自由工具
說明:firefox 環境下的 JavaScript Debugger, 強大的腳本調試工具。
7. Live Http Headers 0.15
https://addons.mozilla.org/en-US/firefox/addon/3829
可以用來實時監測發起的http請求和響應,也可以修改請求參數之後重新發起請求。
說明:浏覽頁面同時記錄所有 HTTP headers 。
8. Add N Edit Cookies 0.2.1.3
https://addons.mozilla.org/en-US/firefox/addon/573
查看和修改本地的Cookie,Cookie欺騙必備。
說明:查看並且修改 cookies, 不方便的地方是顯示所有浏覽器的 cookies 而不僅是當前頁。
9. XPath Checker 0.4.1
https://addons.mozilla.org/en-US/firefox/addon/1095
這個工具沒什麼好多說的,就是安裝後可以直接用,在網上看了使用方法,開始沒看明白,後來才知道是在頁面上點鼠標右鍵,下面有個view xpath,點擊就可以了。
說明:據說可以調試 XPath。
10. YSlow 2.0.6
https://addons.mozilla.org/zh-cn/firefox/addon/5369
YSlow分析網頁,並提出如何提高其性能的基礎上一套規則,高性能的網頁。
說明:能夠幫我們分析web頁面比較慢的原因,它是基於 Firebug的,也能分開浏覽web頁面的元素,比如js,css.
HTML驗證
11. HTML Validator(based on CSE HTML Validator)1.2.3
https://addons.mozilla.org/en-US/firefox/addon/887
HTML Validator是一個Firefox擴展,它能查找並標志出HTML頁面上的錯誤。HTML Validator以Tidy為基礎,Tidy最初是W3C為驗證HTML代碼開發的一個工具。
說明:著名的 CSE HTML Validator 引擎。
12. Relaxed the HTML Validator 0.9.5
https://addons.mozilla.org/en-US/firefox/addon/3939
Relaxed the HTML Validator 0.9.5 這是一個做html驗證的小插件,可以很容易的檢測出頁面的錯誤的html代碼。
說明:直接在當前頁面上進行 HTML validation, 界面清晰直觀。
13. Total Validator 6.2.0
https://addons.mozilla.org/en-US/firefox/addon/2318
這軟件幫 助你檢查你的網頁是否符合標准,結果將幫助你迅速地解決問題。
說明:把當前頁面在 http://www.totalvalidator.com 做HTML Validation,輸出結果用紅字進行了語法修正, 比較友好。不過由於通過其他網站驗證, 速度有點慢, 並且結果不易保存。
頁面設計
14. MeasureIt 0.3.92
https://addons.mozilla.org/en-US/firefox/addon/539
通過可以繪制在頁面任何地方的刻度尺來顯示以像素(px)計算的寬度、高度、元素縮進量。
說明:可以測量頁面上任何選擇區域的長寬, 對界面設計人員非常有幫助。
15. ColorZilla 2.0.2
https://addons.mozilla.org/en-US/firefox/addon/271
利用ColorZilla 您可以從浏覽器中的任一點讀取色彩值,快速調節顏色並粘貼到其他應用程序。您可以縮放正在查看的頁面或測量頁面任意兩點之間的距離。
說明:從 頁面, 或者調色板上取色, 同時可以縮放頁面。
SEO廣告
16. RankQuest SEO Toolbar 3.9.2
https://addons.mozilla.org/en-US/firefox/addon/1471
檢查網站在搜索引擎和alexa的狀態
說明:SEO 工具插件, 訪問一個頁面時, 顯示此頁面的各種排名及 SEO 信息。
17. Adsense Preview 1.5
https://addons.mozilla.org/en-US/firefox/addon/2132
將谷歌廣告放到你的網頁上
說明:在當前頁面上顯示 Google ADs 幫助確定廣告位置。
其他工具
18. HackBar 1.4.2
https://addons.mozilla.org/en-US/firefox/addon/3899
包含一些常用的工具。(SQL injection,XSS,加密等)
說明:快速對字符串進行各種編碼的工具, MD5, Base64, URLencode, URLDecode。
19. Document Map 0.6.1
https://addons.mozilla.org/en-US/firefox/addon/475
顯示當前頁的標題結構中側欄讓之間快速導航…
說明:提供頁面資源結構信息.。
20. IE View Lite 1.3.5
https://addons.mozilla.org/en-US/firefox/addon/1429
IE View 簡裝版,將選項集成到了右鍵關聯菜單中,同時增加了一個工具欄按鈕。
說明:點右鍵可以選擇在 IE 中打開頁面, 有助於跨浏覽器調試。
21. TimeStamp Converter 2.0.0
https://addons.mozilla.org/en-US/firefox/addon/2063
將轉換日期和 timestamps.Context 菜單選項將所選的時間戳轉換為日期。
說明:除去從上下文中轉換, 還可以手動將 timestamp 時間戳與 date/time 轉換。
22. TimestampDecode 0.1.8
https://addons.mozilla.org/en-US/firefox/addon/3208
將所選的編號視為一個時間戳並顯示一個已解碼的日期/時間。
說明:將選中的數字作為 timestamp 時間戳轉換為 date/time。
23. Fire Encrypter 4.0
https://addons.mozilla.org/en-US/firefox/addon/2063
說明:將文字加密成各種算法的密文, 甚至包括摩爾斯碼。
24. Add-in-one Sidebar
https://addons.mozilla.org/en-US/firefox/addon/1027
全方位多功能側邊欄。
說明:在浏覽器左側增加打開書簽, 歷史, 插件等的工具條。