翻譯：FireBug 1.10 新特性

原文地址：http://hacks.mozilla.org/2012/07/firebug-1-10-new-features/

今天安裝了剛剛發布的 FireFox 16, 結果發現 FireBug 不能用了，檢查一下，發現原來的1.9 不能兼容現在的 FireFox 了。

下載了新版的 FireBug 1.10，發現新特性還真不少。不過沒有在網上看到完整的中文介紹。簡單翻譯一下，方便大家。

Firebug 1.10 已經正式發布了， 讓我們了解一下在這個版本中帶來了哪些新的特性。

 

首先,  檢查一下下面的兼容性列表:

• Firefox 5.0 – 13.0 with Firebug 1.9
• Firefox 13.0 – 16.0 with Firebug 1.10

Firebug 1.10 是真正的社區成果, 首先讓我介紹一下為 FireBug 1.10 做出貢獻的所有開發者。

Jan Odvarko Sebastian Zartner Simon Lindholm Harutyun Amirjanyan Steven Roussey Joe Walker Stampolidis Anastasios Heather Arthur

Farshid Beheshti Leon Sorokin Florent Fayolle Vladimir Zhuravlev Hector Zhao Bharath Thiruveedula Nathan Mische

新特性

• 安裝后無需重啟瀏覽器
• 延遲加載
• Cookie 管理
• 命令行編輯器的語法着色
• 自動完成
• 樣式追蹤
• 新的命令: help
• 鏈接到 Web 字體定義
• 支持媒體查詢
• 實體顯示格式
• 顏色顯示格式
• 菜單項的工具提示
• 支持 “focus” CSS 偽類
• 來自 BFCache 的 HTTP 請求
• 刪除 CSS 規則

安裝后無需重啟

安裝 Firebug 不再需要重新啟動瀏覽器，安裝，然后 F12 ，Firebug 立即在你的指尖啟動.

如果你是從上一版的 1.9 升級，則需要重新啟動，你要重新啟動瀏覽器。

延遲加載

Firebug 一點都不會拖慢  Firefox 的啟動時間! 它將在你第一次真正使用的時候立即加載. 在啟動瀏覽器的時候，僅僅 Firebug 的按鈕和開始菜單被加載.

Cookie 管理

Firebug 支持在瀏覽器內查看和管理 Cookie. 你可以對特定的站點禁用  cookies , 過濾 cookies, 創建新的以及刪除已經存在的 cookies. 在特定的 Cookie 值變化的時候，你可以切入調試器，查看導致變化的腳本代碼行，以及更多的內容! 查看完整的 cookie 相關特性列表。

命令行編輯器的語法着色

命令行編輯器 (又名 multiline command line) 支持語法着色.

自動完成

自動完成特性在 Firebug 中從來沒有這么好過. 這個特性可以幫助你編輯 CSS 屬性，監視窗口中的變量，條件斷點，任何數字，顏色，字體等等。 只需要通過 Firebug 的界面編輯頁面，你自己就會看到！

看一下截屏. 當在監視面板中輸入的時候, 自動完成就會提供當前范圍的變量.

樣式追蹤

這個特性可以追蹤影響到特定樣式的所有來源位置. 這個特性是計算樣式的一部分，所有的 CSS 都可以被擴展. 計算樣式還支持顏色、圖像以及字體的提示.

看！，這里有三個位置試圖設置當前選中元素的字體尺寸（黑色的成功設置了）. 當然了， 右邊藍色的文字以及來源位置是可點擊的，可以將你導航到正確的位置，詳細內容可以查看 detailed explanation.

新命令: help

如果在命令行中，你對哪些命令可用感興趣的話，(在控制台面板中) 只需要輸入: help. 你就會看到帶有說明的命令列表。

綠色的命令名稱是將用戶導航到 Firebug wiki 的鏈接，可以提供被點擊命令的更多內容（包括 how-to 示例）

鏈接到 Web 字體定義

這個特性允許快速檢查自定義的字體定義. 所有你要做的僅僅是右擊你的字體值，點擊 Inspect Declaration 然后，你就會被自動導航到 CSS 面板，顯示字體定義的位置，見下面的截圖。

支持媒體查詢

 @import CSS 規則的媒體查詢可以在 CSS 面板內顯示出來，還可以編輯，當然了，自動完成在這種情況下也可以工作。(例如，在我制作截屏的時候，我點擊在 400px 值上，然后按了一下向上的光標鍵，這就是這里為 401px 的原因).

實體顯示格式

在 HTML 面板中提供了新的選項，允許改變 HTML 實體的顯示格式。

使用這種方式，MathML 實體也被支持.

顏色的顯示格式

這里也可以改變 CSS 顏色的顯示格式。 Firebug 提供三種選擇: Hex, RGB 和 HSL. 這些選項存在於 CSS, Style 和 Computed 面板.

菜單的工具提示

還有許多小的但是干凈的改進。所有的菜單項目都帶有工具提示介紹相關的功能。這對於選項特別有用。

支持 “focus” CSS 偽類

除了 hover 和 active CSS 偽類, Firebug 也支持: focus.

這個特性有助於在你希望查看的 CSS 規則僅僅在元素獲取焦點有效的時候. 你需要這么做.

1. 使用 Firebug 查看器選中你的元素
2. 打開 Style 的選項菜單 (點擊旁邊的三角按鈕)
3. 點擊 :focus 選項
4. 現在 Firebug 模擬焦點狀態, 任何使用 :focus  CSS 規則的選中元素樣式將被顯示

來自 BFCache 的 HTTP 請求

Firebug 網絡面板可以顯示來自稱為 BFCache (后退-前進緩存) 的請求. 這個緩存使得訪問后退和前進的頁面請求非常快。注意，對於瀏覽器的緩存沒有做任何事情。

看一下截屏，我們改變了來自 BFCache 的背景，所以可以很容易地與其他請求進行區分，截屏中只有最后一個請求是來自服務器。

為了看到這些請求，你需要選中 Show BFCache Responses 選項。

刪除 CSS 規則

其他的漂亮特性包括刪除整個的 CSS 規則包括它定義的所有屬性，僅僅需要右擊 CSS 規則…

查看 Firebug 1.10 中所有的 79 擴展。

Jan ‘Honza’ Odvarko