今天安裝了剛剛發(fā)布的 FireFox 16, 結(jié)果發(fā)現(xiàn) FireBug 不能用了,檢查一下,發(fā)現(xiàn)原來的1.9 不能兼容現(xiàn)在的 FireFox 了。
下載了新版的 FireBug 1.10,發(fā)現(xiàn)新特性還真不少。不過沒有在網(wǎng)上看到完整的中文介紹。簡單翻譯一下,方便大家。
Firebug 1.10 已經(jīng)正式發(fā)布了, 讓我們了解一下在這個版本中帶來了哪些新的特性。
首先, 檢查一下下面的兼容性列表:
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ā)者。
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 規(guī)則 |
安裝后無需重啟
安裝 Firebug 不再需要重新啟動瀏覽器,安裝,然后 F12 ,F(xiàn)irebug 立即在你的指尖啟動.
如果你是從上一版的 1.9 升級,則需要重新啟動,你要重新啟動瀏覽器。
延遲加載
Firebug 一點都不會拖慢 Firefox 的啟動時間! 它將在你第一次真正使用的時候立即加載. 在啟動瀏覽器的時候,僅僅 Firebug 的按鈕和開始菜單被加載.
Cookie 管理
Firebug 支持在瀏覽器內(nèi)查看和管理 Cookie. 你可以對特定的站點禁用 cookies , 過濾 cookies, 創(chuàng)建新的以及刪除已經(jīng)存在的 cookies. 在特定的 Cookie 值變化的時候,你可以切入調(diào)試器,查看導(dǎo)致變化的腳本代碼行,以及更多的內(nèi)容! 查看完整的 cookie 相關(guān)特性列表。
命令行編輯器的語法著色
命令行編輯器 (又名 multiline command line) 支持語法著色.
自動完成
自動完成特性在 Firebug 中從來沒有這么好過. 這個特性可以幫助你編輯 CSS 屬性,監(jiān)視窗口中的變量,條件斷點,任何數(shù)字,顏色,字體等等。 只需要通過 Firebug 的界面編輯頁面,你自己就會看到!
看一下截屏. 當(dāng)在監(jiān)視面板中輸入的時候, 自動完成就會提供當(dāng)前范圍的變量.
樣式追蹤
這個特性可以追蹤影響到特定樣式的所有來源位置. 這個特性是計算樣式的一部分,所有的 CSS 都可以被擴(kuò)展. 計算樣式還支持顏色、圖像以及字體的提示.
看!,這里有三個位置試圖設(shè)置當(dāng)前選中元素的字體尺寸(黑色的成功設(shè)置了). 當(dāng)然了, 右邊藍(lán)色的文字以及來源位置是可點擊的,可以將你導(dǎo)航到正確的位置,詳細(xì)內(nèi)容可以查看 detailed explanation.
新命令: help
如果在命令行中,你對哪些命令可用感興趣的話,(在控制臺面板中) 只需要輸入: help. 你就會看到帶有說明的命令列表。
綠色的命令名稱是將用戶導(dǎo)航到 Firebug wiki 的鏈接,可以提供被點擊命令的更多內(nèi)容(包括 how-to 示例)
鏈接到 Web 字體定義
這個特性允許快速檢查自定義的字體定義. 所有你要做的僅僅是右擊你的字體值,點擊 Inspect Declaration 然后,你就會被自動導(dǎo)航到 CSS 面板,顯示字體定義的位置,見下面的截圖。
支持媒體查詢
@import CSS 規(guī)則的媒體查詢可以在 CSS 面板內(nèi)顯示出來,還可以編輯,當(dāng)然了,自動完成在這種情況下也可以工作。(例如,在我制作截屏的時候,我點擊在 400px 值上,然后按了一下向上的光標(biāo)鍵,這就是這里為 401px 的原因).
實體顯示格式
在 HTML 面板中提供了新的選項,允許改變 HTML 實體的顯示格式。
使用這種方式,MathML 實體也被支持.
顏色的顯示格式
這里也可以改變 CSS 顏色的顯示格式。 Firebug 提供三種選擇: Hex, RGB 和 HSL. 這些選項存在于 CSS, Style 和 Computed 面板.
菜單的工具提示
還有許多小的但是干凈的改進(jìn)。所有的菜單項目都帶有工具提示介紹相關(guān)的功能。這對于選項特別有用。
支持 “focus” CSS 偽類
除了 hover 和 active CSS 偽類, Firebug 也支持: focus.
這個特性有助于在你希望查看的 CSS 規(guī)則僅僅在元素獲取焦點有效的時候. 你需要這么做.
使用 Firebug 查看器選中你的元素
打開 Style 的選項菜單 (點擊旁邊的三角按鈕)
點擊 :focus 選項
現(xiàn)在 Firebug 模擬焦點狀態(tài), 任何使用 :focus CSS 規(guī)則的選中元素樣式將被顯示
來自 BFCache 的 HTTP 請求
Firebug 網(wǎng)絡(luò)面板可以顯示來自稱為 BFCache (后退-前進(jìn)緩存) 的請求. 這個緩存使得訪問后退和前進(jìn)的頁面請求非?。注意,對于瀏覽器的緩存沒有做任何事情。
看一下截屏,我們改變了來自 BFCache 的背景,所以可以很容易地與其他請求進(jìn)行區(qū)分,截屏中只有最后一個請求是來自服務(wù)器。
為了看到這些請求,你需要選中 Show BFCache Responses 選項。
刪除 CSS 規(guī)則
其他的漂亮特性包括刪除整個的 CSS 規(guī)則包括它定義的所有屬性,僅僅需要右擊 CSS 規(guī)則…