Mozilla技術佈道者給Web開發人員推薦的Firefox外掛列表

魏哲發表於2013-04-21

編者按:本文作者 Robert Nyman 是 Mozilla 的技術佈道者,從1999年開始從事Web前端開發 。

讓Web開發人員的生活儘可能輕鬆和高效,這是Firefox一直堅持的目標之一。通過提供工具和可擴充套件的web瀏覽器,讓開發人員能夠創造出令人驚奇的東西。

Firefox自帶的開發工具

我們致力於開發一系列包含在Firefox內的開發工具。它們在 Developer Tools in Firefox Aurora 10 中有更詳細的描述,有了它們我們就能做出一些很有趣的事。

我們對大量的使用者介面和編碼方式進行測試和評估,從而找出在頁面中最理想的編碼方式。如果你安裝了Firefox Aurora,你現在就可以試試!讓我們知道你的想法。

繼續關注本部落格,我們會持續更新自帶開發工具的進展和功能。

 

Firebug

目前為止,瀏覽器中最著名的web開發工具當屬Firebug,毋庸置疑,在相當長的一段時間裡,它將成為web開發與除錯的標準。Firebug還擁有許多強大的功能,包括大量的外掛(見下文)。

但是有件事你需要明白,那就是如果你安裝了過多的Firebug外掛,它將佔用大量記憶體,所以要選擇適合自己的。(編注:推薦閱讀 《Web開發者應掌握的12個Firebug技巧》)

 

一、針對web開發者的Firefox外掛

多年來,已經有很多外掛能夠幫助web開發者最大限度的利用Firefox。下面將列出其中最著名、使用最多的,如果我們疏漏了什麼,請在評論中告訴我們!

Accessibility Evaluation Toolbar
為web開發者提供測試web資源的輔助功能。

All in One Sidebar
AiOS可以讓你開啟多個視窗作為側邊欄,並能在它們之間快速切換。有了它,你就可以告別雜亂無章的視窗了!除了書籤和歷史記錄,它還可以在側邊欄中開啟下載,外掛等對話方塊。

Cache Status
輕鬆檢視和管理快取。

CacheToggle
輕輕一點,就能禁用(或清除)瀏覽器快取。

Colorzilla
高階取色器,拾色器,漸變色生成器和其他一些功能。

Console2
Console2可能會成為下一代錯誤控制檯,從而取代JavaScript控制檯。從v0.5版本開始就有控制檯過濾器外掛,之前只能在Console2網站上獲取。

CSS Reloader
CSS Reloader可以讓你過載任何網站的CSS,而不需要過載頁面。

DOM Inspector
DOM Inspector可以用來審閱、編輯web文件或XUL程式中使用的DOM。在雙視窗中以不用的檢視顯示文件及內部節點,並控制DOM。

Firefogg
可對Firefox中的視訊和音訊進行編碼。利用Firefogg你可以把大部分媒體檔案編碼為Ogg或WebM。Firefogg還提供API來把編碼過程整合到上傳程式中。

FireFTP
FireFTP是Firefox上一款免費、安全、跨平臺的FTP/SFTP客戶端,可以簡單、直觀的連線到FTP/SFTP伺服器上。

FireUnit
一款JavaScript單元測試外掛程式。

FoxGuide
顯示水平和垂直參考線,跟你在PhotoShop裡用的一樣。有助於改善佈局,把元素放在適當的網格中,對稱排布元素,構造出一個設計。

FoxyProxy Standard
FoxyProxy是一款高階代理管理工具,完全替代了Firefox本身有限的代理功能。它比SwitchProxy、ProxyButton、 QuickProxy、 xyzproxy、 ProxyTex、 TorButton等擁有更多的功能。

Geolocater
把你定位到你想要的位置。

GreaseMonkey
通過使用少量JavaScript,可以自定義網頁的顯示方式。

HTML Validator
HTML Validator是一個Mozilla外掛,它在Firefox和Mozilla中新增了HTML驗證。可以在圖示上看到一個HTML頁面的錯誤數量。

HttpFox
一個用於Firefox的HTTP分析器外掛。

iMacros for Firefox
是Firefox自動化。記錄並重播重複工作。如果你喜歡Firefox瀏覽器,卻對重複的任務(例如,每天訪問相同的網站,填寫表單,記住密碼等)感到厭煩的話,iMacros for Firefox便是你夢寐以求的解決方案!

Jenkins Build Monitor
Monitor Jenkins(http://jenkins-ci.org)在Firefox狀態列中建立並顯示當前狀態。

jQuery extension
內嵌於瀏覽器的jQuery和jQuery UI。

JSONovich
以簡單、低調的檢視漂亮的顯示出瀏覽器中JSON的內容。

JSONView
顯示瀏覽器中的JSON文件。

JSView
如果你正在訪問的網站包含了任何外部js/css檔案,圖示上就會顯示“SS”、”JS”或者都有。點選檔名就能檢視各個檔案。檔案會在新視窗中開啟。

Link Widgets
通過在工具欄按鈕上新增首頁、上一頁、下一頁、尾頁來簡化頁面導航(例如線上漫畫、論壇或者技術規範,比如:HTML4建議)。

Live HTTP Headers
在瀏覽網頁時檢視HTTP頭資訊。

LiveReload
LiveReload能在檔案發生改變時重新整理網頁。

MeasureIt
可以在任何網頁上顯示標尺,用來檢查寬度、高度,或者以畫素為單位對其頁面元素。

Modify Headers
能夠新增、修改、過濾傳送給web伺服器的HTTP報頭,這個外掛特別有助於移動web開發、HTTP測試和隱私保護。

NoScript
瀏覽器上最好的安全外掛。只有你信任站點上的活動內容才能執行,保護你免受跨站指令碼攻擊和點選劫持攻擊。

PageSpeed
Page Speed是由Google發起的開源專案,旨在通過應用web效能最佳例項來幫助開發者優化他們的網頁。

PixelZoomer
PixelZoomer能夠對當前網站進行截圖,並提供多種畫素分析工具。你可以放大網站(最大3200%),測量間距並用取色器取色。

Pixlr Grabber
抓取螢幕和網頁圖片變得輕而易舉。有了Pixlr Grabber,只需點選右鍵,你就可以複製、儲存、分享甚至編輯你的最終抓取效果——包括所有圖片或者背景。

Poster
一個與網路服務和其他網路資源互動的開發者工具,可以讓你製作HTTP請求,設定實體段和內容型別。允許你與網路服務相互並檢視結果。

QuickJava
可以在狀態列或者工具欄快速開啟或禁用Java、Javascript、Flash、 Silverlight、Images、樣式表和代理,而無需開啟任何對話方塊。

Rainbow Color Tools
針對web開發者的顏色工具。選色器、取色器+儲存顏色,還能通過拖放提取顏色。

Regular Expressions Tester
測試正規表示式的工具,帶有顏色高亮(包含子匹配項),也是建立表示式的幫手。

Remove Cookie(s) for Site
一個非常簡單的外掛,用來清除當前開啟站點的cookies。它在網頁的右鍵選單中新增了一個選項,用一鍵清除Cookies按鈕來執行操作,會在狀態列中顯示其狀態。

Screenshot Pimp
只需輕輕一點,就能捕獲、抓取、儲存、下載或者複製任何你在瀏覽器中能看到的東西!Screenshot pimp是目前為止Windows和Mac上定製性和使用者體驗最好的截圖工具欄。

SQLite Manager
管理你電腦上所有的SQLite資料庫。

Selenium IDE Buttons
用一個簡單的工具欄按鈕來開啟selenium IDE。你需要已經安裝了selenium IDE:http://seleniumhq.org/projects/ide/

SeoQuake SEO extension
Seoquake是一款FirefoxSEO外掛,旨在幫助那些涉及搜尋引擎優化(SEO)社會媒體優化(SMO)和網路促銷的人。Seoquake可以審查很多重要的SEO引數。

ShowIP
在狀態列顯示當前頁面的IP地址。還允許通過IP(右鍵單擊)和hostname(左鍵單擊)查詢自定義資訊服務,例如whois、netcraft等。此外,你還可以複製IP到剪貼簿。

Stylish
用Stylish重構網頁,它是一款使用者風格管理器。Stylish能讓你輕易的為很多網站安裝主題和皮膚,像Google、Facebook、YouTuBe、Orkut等,你甚至可以自定義Firefox或者其他程式的主題。

Tamper Data
使用tamperdata可以檢視、修改HTTP/HTTPS頭及post引數。

TAW3
只需通過一個簡單的按鈕,你就能瞭解一個網站是否能夠訪問。

Tilt 3D
一個基於WebGL的外掛,可以讓網頁變成3D視覺化的效果。

Total Validator
能夠一次執行多種不同的驗證。包括外部的、內部的或者本地網頁(需要從http://www.totalvalidator.com/downloads/extensiontool.html獲取一個桌面工具)。

TryAgain
TryAgain會在伺服器不能訪問時,不斷嘗試載入網頁。

User Agent Switcher
User Agent Switcher新增了一個選單和一個工具欄按鈕,來控制瀏覽器的使用者代理。

Wappalyzer
Wappalyzer是一個能夠發現網站開發技術的瀏覽器外掛。

Web Developer
Web Developer會在瀏覽器中新增各種web開發者工具。

 

二、Firebug extensions

在一些不同情況下,會用到很多Firebug的外掛,在這裡會列出其中一部分:

Acebug
Acebug對Firebug命令列進行語法高亮,並具有模糊自動完成功能。

Code Coverage v2 for Firebug 0.1
這個Firebug外掛用來報告Jacascript的程式碼覆蓋率。

CSS Usage
用來檢視使用了哪些CSS規則的Firebug外掛。

Firecookie
Firecookie是一款可以檢視、管理瀏覽器Cookies的Firebug外掛。

Firefinder
查詢與選中的CSS選擇器或XPath表示式相匹配的HTML元素。

FirePHP
FirePHP通過一個簡單的PHP方法呼叫,就能讓你記錄你的Firebug控制檯。

FireQuery
針對jQuery開發的Firebug外掛。

friendly bug
讓Firebug介面友好,更易於使用。

Inline Code Finder for Firebug
Inline Code Finder是一個Firebug外掛,能發現HTML元素中存在的這些問題:內聯JavaScript事件、內聯樣式、javascript: links。

FireRainbow
Firebug中的JacaScript語法高亮工具。

NetExport
NetExport是一個Firebug外掛,可以匯出所有Net panel中收集和計算的資料。建立的檔案使用HTTP存檔(HAR)格式(基於JSON)

Pixel Perfect
Pixel Perfect是一個Firebug外掛,能夠讓web開發者和設計師輕鬆的把一張web構圖覆蓋在開發的HTML頁面上。

YSlow
YSlos能夠分析網頁載入緩慢的原因,基於Yahoo!的高效能網站標準。

更多 Firebug 外掛,請檢視Firebug官方wiki。

 

原文作者:Robert Nyman        編譯:伯樂線上 – 魏哲

如需轉載,請保留文章出處和文章超連結,謝謝合作。

相關文章