Firefox的目標之一就是儘可能地使web開發者的生活更簡單高效,並通過提供工具和具有很強擴展性的瀏覽器使人們創造出神奇的東西。使web開發者使用Firefox的時候,瀏覽器可以提供大量開發工具和選項。本文將這些工具做了簡單整理。
Firebug
迄今爲止,最知名的web瀏覽器的web開發工具就是Firebug擴充套件。毫無疑問,在很長的一段時間,它把怎麼進行開發和調試作爲自己的門檻。Firebug是一個有很多強大的功能的重要工具,包括很多擴展。
Firefox爲web開發提供的擴展
多年來,Firefox開發了許多擴展來幫助web開發者最大化利用Firefox。用得最多最有名的是下面列出來的這些。如果我們漏掉了對你有幫助的擴充套件,請一定告知我們。
All in one Sidebar
AiOS允許你打開多個窗口作爲側欄面板,並能夠在他們之間快速切換。AIOS結束了窗口混亂的時代,除了書籤和歷史記錄外,它還在側邊欄增加了下載,加載項和其他的一些對話框。
Cache Status
CacheToogle
Colorzilla
高級取色器,顏色選擇器,漸變顏色生成器,和其他的一些進行顏色處理的工具。
Console²
Console²可能會成爲下一代的錯誤控制檯,用來取代JavaScript控制檯。
從火狐v0.5開始就有控制檯過濾擴展套件,之前該套件只在Console²網站上可用。
CSS Reloader使你能夠重新加載網站的CSS,而需要重新加載網頁。
DOM Inspector用來觀察,編輯web文件或XUL應用正在使用的DOM。可以通過一個顯示文件和節點的不同視圖的兩個小窗口拼起來的大窗口來查看DOM。
該插件用來編碼Firefox中的視頻和音頻。用Firefogg吧大部分的媒體文件編碼成Ogg和WebM。Firefox提供接口用來整合編碼上傳的程序。
FireFTP是一個免費,安全,跨平臺的一個Mozilla FirefoxFTP/SFTP客戶端,該客戶端爲訪問FTP/SFTP提供簡單直觀的途徑。
顯示水平和豎直的不定浮動指南,與你在Photoshop使用到它的方式一樣。有助於改進佈局,將元素放在恰當的網格中,系統地放置元素,使設計更結構化。
FoxyProxy是一個高級代理管理工具,它完全替代了Firefox的有限的代理性能。跟SwitchProxy相比,它提供更多的功能。
HTMLValidator是個Mozilla擴充套件,它在Firefox和Mozilla中添加了HTML驗證。HTML頁面中的錯誤數量通過窗口上的按鈕來顯示。
自動化火狐瀏覽器。記錄和重現重複的工作。如果你喜歡Firefoxweb瀏覽器,但是厭倦了重複的工作,比如說每天訪問同樣的站點,填寫重複的表格,還要記住密碼,那麼Firefox的iMacros就是你夢想的解決方式。
Monitor Jenkins(http://jenkins-ci.org)創建和顯示Firefox狀態欄中的狀態。
如果你瀏覽的網站包含外部的js/css文件,會出現一個有“SS”,“JS”或者兩者都有的按鈕,每個單獨的文件都可以通過點擊文件名進行查看。文件將會在一個新的窗口打開。
通過給第一頁,前一頁,下一頁,最後一頁提供工具欄按鈕來簡化了頁面序列的導航(比如,Web漫畫,論壇,或者技術規範如HTML4建議)。
在網頁上畫一個尺子來查看寬度和高度或者以像素爲單位對齊網頁元素。
添加、修改、過濾發送到web服務器上的請求頭。這個加載項尤其適用於移動web的開發,HTTP測試和隱私保護。
通過這個套件你可以獲得web瀏覽器中最好的安全性能,它只允許你信任的網站播放動態內容,而且保護你免受XSS和Clickjacking的攻擊。
PageSpeed 是開源的,最早出現在Google上通過分析網頁性能最佳實例來幫助開發者優化他們的網頁。
PixelZoomer可以獲取當前網站的截屏,並提供多個工具進行像素分析。利用這個工具你可以放大網頁(最大可以放大32倍),測量距離,和獲取顏色。
使用Pixlr Grabber使抓屏和從網頁上抓取圖片變得更容易。使用PixlrGrabber加載項,你只需要點擊一下右鍵就可以複製,保存,分享,甚至可以編輯你抓取的圖片或背景
這是一個開發者工具欄,用來跟web服務和其他web資源進行交互,允許你發出HTTP請求,設置實體主體和內容類型。Poster允許你與web服務進行交互並檢視結果。
在狀態欄和(或)工具欄中快速啓用和禁用Java,Javascript,Flash,Sliverlight,Images,Stylesheets,he Proxy,而不需要打開任何對話!
Web開發的顏色工具。選色,取色+保存顏色,並拖放這些顏色來嘗試調配顏色。
正則表達式的測試工具(用高亮色顯示(包括子匹配))和新建表達式的助手。
這是一個非常簡單的擴展套件,用來移除所有的正在打開網站。它在你的網頁右鍵菜單中添加了一個選項,和一個清除Cookies按鈕來完成操作,並在狀態欄顯示操作的狀態。
只要點擊一下,你就可以捕獲,抓取,保存,下載或者複製你在web瀏覽器上看到的任何東西。Screenshot pimp是迄今爲止最具有自主定義性和用戶友好的屏幕捕獲工具欄,這個工具欄能在Windows和Mac上使用。
只需要一個簡單的工具欄按鈕就可以打開SeleniumIDE。你需要先安裝SeleniumIDE:http://seleniumhq.org/projects/ide/
Seoquake是Firefox 的一個SEO套件,其主要目的是幫助網管優化搜索引擎,優化社交媒體,和Internet推廣。Seoquake允許研究許多重要的SEO參數。
在狀態欄中顯示當前網頁的IP地址。它也允許通過IP查詢用戶信息服務(右鍵)和主機姓名(左鍵)。另外,你可以把IP地址拷貝到粘貼板。
用Stylish重設網頁的樣式,它是一個用戶樣式管理器。Stylish允許你很容易就可以爲Google,Facebook,YouTube,Orkut和許多其他網站安裝主題和皮膚。你甚至可以自定義Firefox和其他程序。
用tempdata訪問修改HTTP/HTTPS表頭和發送參數。
該套件對網頁執行一系列的驗證操作。這種多重驗證包括外部,內部,本地網頁驗證,本地網頁驗證是通過一個從http://www.totalvalidator.com/downloads/extensiontool.html獲得的桌面工具本地的拷貝進行的。
TryAgain一直在嘗試着在無法連接服務器的時候加載網頁。
UserAgentSwitcher擴充套件添加了一個菜單和工具欄按鈕,用來切換用戶代理。
Wapplayer是一個瀏覽器加載項,該加載項用來顯示用在網站上的技術。
WebDevelop擴充套件給瀏覽器添加了許多web開發工具。
Firebug extensions
在一些特殊的用例中用到一些Firebug的擴充套件,下面將列出其中的一部分:
Code Coverage v2 for Firebug 0.1
這個Firebug擴充套件用來記錄Javascript代碼的覆蓋率。
Firecookie是Firebug的一個擴充套件,該套件能夠查看,管理你的瀏覽器裏的cookies。
找到與選中的CSS選擇器或者Xpath表達式匹配的HTML元素。
FirePHP允許你調用一個簡單PHP方法將日誌寫入Firefox控制檯。
Inline Code Finder for Firebug
Inline Code Finder 是Firebug的一個加載項,能夠發現HTML元素中的一些問題:內聯的 Javascript事件,內聯的樣式,是在鏈接的href屬性中直接編寫javascript代碼。
NetExport是Firebug的擴展,該擴展允許輸出所有NetPanel收集和計算的數據。已創建的文件使用HTTP文檔格式(基於JSON)。
PixelPerfect是Firefox/Firebug的一個擴展,這個擴展允許web開發者和設計者用web組件輕鬆覆蓋原來的HTML的頭部.
YSlow分析網頁,並根據Yahoo!爲高性能網站提供的規則來分析網站爲什麼運行緩慢。
Firebug Extension Wiki於Firebug的擴充套件。