Firefox自帶的開發工具

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

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

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

Firebug

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

但是有件事你需要明白，那就是如果你安裝了過多的Firebug外掛，它將佔用大量記憶體，所以要選擇適合自己的。

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

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

為Web開發者提供測試Web資源的輔助功能。

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

輕鬆檢視和管理快取。

輕輕一點，就能禁用（或清除）瀏覽器快取。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

顯示瀏覽器中的JSON文件。

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

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

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

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

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

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

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

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

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

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

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

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

針對Web開發者的顏色工具。選色器、取色器+儲存顏色，還能通過拖放提取顏色。

測試正則表示式的工具，帶有顏色高亮（包含子匹配項），也是建立表示式的幫手。

一個非常簡單的外掛，用來清除當前開啟站點的Cookies。它在網頁的右鍵選單中添加了一個選項，用一鍵清除Cookies按鈕來執行操作，會在狀態列中顯示其狀態。

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

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

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

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

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

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

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

TAW3

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

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

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

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

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

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

二、Firebug extensions

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

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

這個Firebug外掛用來報告Jacascript的程式碼覆蓋率。

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

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

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

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

針對jQuery開發的Firebug外掛。

讓Firebug介面友好，更易於使用。

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

Firebug中的JacaScript語法高亮工具。

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

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

YSlow

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

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

文章出自：伯樂線上