FireBug 1.10 支持FireFox16.0、FireBug使用介紹

今天安裝了剛剛發(fā)布的 FireFox 16, 結(jié)果發(fā)現(xiàn) FireBug 不能用了，檢查一下，發(fā)現(xiàn)原來的1.9 不能兼容現(xiàn)在的 FireFox 了。

下載了新版的 FireBug 1.10，發(fā)現(xiàn)新特性還真不少。不過沒有在網(wǎng)上看到完整的中文介紹。簡(jiǎn)單翻譯一下，方便大家。

Firebug 1.10 已經(jīng)正式發(fā)布了， 讓我們了解一下在這個(gè)版本中帶來了哪些新的特性。

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

Firefox 5.0 – 13.0 with Firebug 1.9

Firefox 13.0 – 16.0 with Firebug 1.10

Firebug 1.10 是真正的社區(qū)成果, 首先讓我介紹一下為 FireBug 1.10 做出貢獻(xiàn)的所有開發(fā)者。

PSE: collapse; orphans: 2; widows: 2; webkit-text-size-adjust: auto; webkit-text-stroke-width: 0px" cellpadding="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 管理 命令行編輯器的語(yǔ)法著色 自動(dòng)完成 樣式追蹤 新的命令: help 鏈接到 Web 字體定義 支持媒體查詢 實(shí)體顯示格式 顏色顯示格式 菜單項(xiàng)的工具提示 支持 “focus” CSS 偽類 來自 BFCache 的 HTTP 請(qǐng)求 刪除 CSS 規(guī)則

安裝后無需重啟

安裝 Firebug 不再需要重新啟動(dòng)瀏覽器，安裝，然后 F12 ，F(xiàn)irebug 立即在你的指尖啟動(dòng).

如果你是從上一版的 1.9 升級(jí)，則需要重新啟動(dòng)，你要重新啟動(dòng)瀏覽器。

延遲加載

Firebug 一點(diǎn)都不會(huì)拖慢  Firefox 的啟動(dòng)時(shí)間! 它將在你第一次真正使用的時(shí)候立即加載. 在啟動(dòng)瀏覽器的時(shí)候，僅僅 Firebug 的按鈕和開始菜單被加載.

Cookie 管理

Firebug 支持在瀏覽器內(nèi)查看和管理 Cookie. 你可以對(duì)特定的站點(diǎn)禁用  cookies , 過濾 cookies, 創(chuàng)建新的以及刪除已經(jīng)存在的 cookies. 在特定的 Cookie 值變化的時(shí)候，你可以切入調(diào)試器，查看導(dǎo)致變化的腳本代碼行，以及更多的內(nèi)容! 查看完整的 cookie 相關(guān)特性列表。

命令行編輯器的語(yǔ)法著色

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

自動(dòng)完成

自動(dòng)完成特性在 Firebug 中從來沒有這么好過. 這個(gè)特性可以幫助你編輯 CSS 屬性，監(jiān)視窗口中的變量，條件斷點(diǎn)，任何數(shù)字，顏色，字體等等。 只需要通過 Firebug 的界面編輯頁(yè)面，你自己就會(huì)看到！

看一下截屏. 當(dāng)在監(jiān)視面板中輸入的時(shí)候, 自動(dòng)完成就會(huì)提供當(dāng)前范圍的變量.

樣式追蹤

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

看！，這里有三個(gè)位置試圖設(shè)置當(dāng)前選中元素的字體尺寸（黑色的成功設(shè)置了）. 當(dāng)然了， 右邊藍(lán)色的文字以及來源位置是可點(diǎn)擊的，可以將你導(dǎo)航到正確的位置，詳細(xì)內(nèi)容可以查看 detailed explanation.

新命令: help

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

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

鏈接到 Web 字體定義

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

支持媒體查詢

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

實(shí)體顯示格式

在 HTML 面板中提供了新的選項(xiàng)，允許改變 HTML 實(shí)體的顯示格式。

使用這種方式，MathML 實(shí)體也被支持.

顏色的顯示格式

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

菜單的工具提示

還有許多小的但是干凈的改進(jìn)。所有的菜單項(xiàng)目都帶有工具提示介紹相關(guān)的功能。這對(duì)于選項(xiàng)特別有用。

支持 “focus” CSS 偽類

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

這個(gè)特性有助于在你希望查看的 CSS 規(guī)則僅僅在元素獲取焦點(diǎn)有效的時(shí)候. 你需要這么做.

使用 Firebug 查看器選中你的元素

打開 Style 的選項(xiàng)菜單 (點(diǎn)擊旁邊的三角按鈕)

點(diǎn)擊 :focus 選項(xiàng)

現(xiàn)在 Firebug 模擬焦點(diǎn)狀態(tài), 任何使用 :focus  CSS 規(guī)則的選中元素樣式將被顯示

來自 BFCache 的 HTTP 請(qǐng)求

Firebug 網(wǎng)絡(luò)面板可以顯示來自稱為 BFCache (后退-前進(jìn)緩存) 的請(qǐng)求. 這個(gè)緩存使得訪問后退和前進(jìn)的頁(yè)面請(qǐng)求非常快。注意，對(duì)于瀏覽器的緩存沒有做任何事情。

看一下截屏，我們改變了來自 BFCache 的背景，所以可以很容易地與其他請(qǐng)求進(jìn)行區(qū)分，截屏中只有最后一個(gè)請(qǐng)求是來自服務(wù)器。

為了看到這些請(qǐng)求，你需要選中 Show BFCache Responses 選項(xiàng)。

刪除 CSS 規(guī)則

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