Mozilla技術布道者給Web開發人員推薦的Firefox插件列表
編者按:本文作者 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、非死book、油Tube、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 編譯:伯樂在線 – 魏哲