Firefox上Web輔助開發插件

大多數網頁設計師與前端工程師都會使用Firefox(火狐浏覽器)，由于Firefox豐富的Web開發輔助插件可以為我們提供許多好的功能，比如HTML,CSS,JS查錯，找BUG等等。是以這裡整理了目前常用的一些Firefox Web開發插件。

開發工具

1.  Web Developer 1.1.8

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/60">https://addons.mozilla.org/en-US/firefox/addon/60</a>

以工具欄的形式對網頁的(X)HTML、腳本、多媒體、CSS、緩存、圖象等多方面的實用工具。使我們能輕易的獲得網頁的更多資訊，使我們進一步的了解當 前所浏覽的網頁。

說明：超強的web分析工具，開發人員必裝。

2.  Firebug 1.5.0

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/1843">https://addons.mozilla.org/en-US/firefox/addon/1843</a>

Firebug是firefox下的一個插件,能夠調試所有網站語言,如Html,Css等，但FireBug最吸引我的就是javascript調試 功能，使用起來非常友善，而且在各種浏覽器下都能使用（IE,Firefox,Opera, Safari），簡直難以置信。除此之外，其他功能還很強大。比如html,css,dom的察看與調試，網站整體分析等等。總之就是一整套完整而強大的 WEB開發工具。

說明：檢視，編輯，Debug頁面的CSS,HTML,JavaScript。超強的開發調試的工具，開發人員必裝。

3.  LinrLightWeb 0.2.1

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/1843">https://addons.mozilla.org/zh-CN/firefox/addon/14068</a>

安裝前，請确認您已安裝Firebug插件，擷取Firebug請通路:http://getfirebug.com/

1. 開啟網頁編輯模式，随意編輯網頁——Fiddler的好搭檔;

2. 超強Selector，查找操作标記;

3. 重新整理CSS，無需重新整理整頁;

5. 保持登入狀态，Session不過期;禁用

6. 同步發行IE版，Chrome版。

說明：非常強的web開發工具。

4.  View Source Char 2.7

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/655">https://addons.mozilla.org/en-US/firefox/addon/655</a>

畫一個 Color-Coded 的圖表的 Web 頁的源代碼。

說明：顯示非常好看的源碼, 分級縮進, 不同顔色區分。

5.  Tamper Data 11.0.0

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/966">https://addons.mozilla.org/en-US/firefox/addon/966</a>

說明：檢視 firefox 收發請求的 header, 特别是在送出請求前, 可以修改 header。

6.  JavaScript Debuger 0.9.87.4

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/216">https://addons.mozilla.org/en-US/firefox/addon/216</a>

Venkman 作為Mozilla的調試器，是針對Mozilla(Firefox)的自由工具

說明：firefox 環境下的 JavaScript Debugger, 強大的腳本調試工具。

7.  Live Http Headers 0.15

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/3829">https://addons.mozilla.org/en-US/firefox/addon/3829</a>

可以用來實時監測發起的http請求和響應，也可以修改請求參數之後重新發起請求。

說明：浏覽頁面同時記錄所有 HTTP headers 。

8.  Add N Edit Cookies 0.2.1.3

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/573">https://addons.mozilla.org/en-US/firefox/addon/573</a>

檢視和修改本地的Cookie，Cookie欺騙必備。

說明：檢視并且修改 cookies, 不友善的地方是顯示所有浏覽器的 cookies 而不僅是目前頁。

9.  XPath Checker 0.4.1

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/1095">https://addons.mozilla.org/en-US/firefox/addon/1095</a>

說明：據說可以調試 XPath。

10. YSlow 2.0.6

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/1095">https://addons.mozilla.org/zh-cn/firefox/addon/5369</a>

YSlow分析網頁,并提出如何提高其性能的基礎上一套規則,高性能的網頁。

說明：能夠幫我們分析web頁面比較慢的原因，它是基于 Firebug的，也能分開浏覽web頁面的元素，比如js,css.

HTML驗證

11.  HTML Validator(based on CSE HTML Validator)1.2.3

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/887">https://addons.mozilla.org/en-US/firefox/addon/887</a>

HTML Validator是一個Firefox擴充，它能查找并标志出HTML頁面上的錯誤。HTML Validator以Tidy為基礎，Tidy最初是W3C為驗證HTML代碼開發的一個工具。

說明：著名的 CSE HTML Validator 引擎。

12.  Relaxed the HTML Validator 0.9.5

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/3939">https://addons.mozilla.org/en-US/firefox/addon/3939</a>

Relaxed the HTML Validator 0.9.5 這是一個做html驗證的小插件，可以很容易的檢測出頁面的錯誤的html代碼。

說明：直接在目前頁面上進行 HTML validation, 界面清晰直覺。

13.  Total Validator 6.2.0

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/2318">https://addons.mozilla.org/en-US/firefox/addon/2318</a>

說明：把目前頁面在 http://www.totalvalidator.com 做HTML Validation,輸出結果用紅字進行了文法修正, 比較友好。不過由于通過其他網站驗證, 速度有點慢, 并且結果不易儲存。

頁面設計

14.  MeasureIt 0.3.92

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/539">https://addons.mozilla.org/en-US/firefox/addon/539</a>

通過可以繪制在頁面任何地方的刻度尺來顯示以像素(px)計算的寬度、高度、元素縮進量。

說明：可以測量頁面上任何選擇區域的長寬, 對界面設計人員非常有幫助。

15.  ColorZilla 2.0.2

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/271">https://addons.mozilla.org/en-US/firefox/addon/271</a>

利用ColorZilla 您可以從浏覽器中的任一點讀取色彩值，快速調節顔色并粘貼到其他應用程式。您可以縮放正在檢視的頁面或測量頁面任意兩點之間的距離。

說明：從 頁面, 或者調色闆上取色, 同時可以縮放頁面。

SEO廣告

16.  RankQuest SEO Toolbar 3.9.2

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/1471">https://addons.mozilla.org/en-US/firefox/addon/1471</a>

檢查網站在搜尋引擎和alexa的狀态

說明：SEO 工具插件, 通路一個頁面時, 顯示此頁面的各種排名及 SEO 資訊。

17.  Adsense Preview 1.5

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/2132">https://addons.mozilla.org/en-US/firefox/addon/2132</a>

将谷歌廣告放到你的網頁上

說明：在目前頁面上顯示 Google ADs 幫助确定廣告位置。

其他工具

18.  HackBar 1.4.2

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/3899">https://addons.mozilla.org/en-US/firefox/addon/3899</a>

包含一些常用的工具。(SQL injection,XSS,加密等)

說明：快速對字元串進行各種編碼的工具, MD5, Base64, URLencode, URLDecode。

19.  Document Map 0.6.1

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/475">https://addons.mozilla.org/en-US/firefox/addon/475</a>

顯示目前頁的标題結構中側欄讓之間快速導航…

說明：提供頁面資源結構資訊.。

20.  IE View Lite 1.3.5

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/1429">https://addons.mozilla.org/en-US/firefox/addon/1429</a>

IE View 簡裝版，将選項內建到了右鍵關聯菜單中，同時增加了一個工具欄按鈕。

說明：點右鍵可以選擇在 IE 中打開頁面, 有助于跨浏覽器調試。

21.  TimeStamp Converter 2.0.0

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/2063">https://addons.mozilla.org/en-US/firefox/addon/2063</a>

将轉換日期和 timestamps.Context 菜單選項将所選的時間戳轉換為日期。

說明：除去從上下文中轉換, 還可以手動将 timestamp 時間戳與 date/time 轉換。

22.  TimestampDecode 0.1.8

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/3208">https://addons.mozilla.org/en-US/firefox/addon/3208</a>

将所選的編号視為一個時間戳并顯示一個已解碼的日期/時間。

說明：将選中的數字作為 timestamp 時間戳轉換為 date/time。

23.  Fire Encrypter 4.0

說明：将文字加密成各種算法的密文, 甚至包括摩爾斯碼。

24.  Add-in-one Sidebar

<a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/1027">https://addons.mozilla.org/en-US/firefox/addon/1027</a>

全方位多功能側邊欄。

說明：在浏覽器左側增加打開書簽, 曆史, 插件等的工具條。