firebug更新1.12，新功能和改進解析
目前Firebug 最新版爲 1.12 版，相比之前的版本又有了不少新功能和改進。幾天的試用之後，我這裏集中介紹下 firebug 的 1.12 更新。半年前的 1.11 版更新也引入了不少新功能，本文摘幾條比較有用的放最後。
自動完成改進
新版 Firebug 對控制檯的自動完成提示浮層做了改進，將 Firebug 的自己的控制檯 Api 在浮層底部單獨顯示了出來。
網絡和控制檯支持多條件過濾
在“網絡”和“控制檯”兩個面板下，默認顯示的是全部內容，也可以根據頂部 Tab 篩選不同條件。現在 Firebug 支持同時選擇多個過濾條件，方法是按住Ctrl（Mac 下是 Cmd）再選。題外話，Chrome 開發工具一直就支持這樣多選。
複製 CSS 屬性
新版 Firebug 複製 CSS 變得更容易了。在 CSS 源碼上右鍵，可以方便的複製全部或部分內容，如下圖：
新增網絡過濾器
在“網絡”面板下，之前專門顯示 Flash 請求的標籤改名爲“插件”了，除了 Flash，還會顯示 Silverlight 等其它插件請求。另外，本次更新還增加了一個“字體”的標籤，用於顯示 WebFont 請求（需要 Content-Type 爲 font/ttf 或 font/woff）。
Dom 事件記錄過濾器
之前的 Firebug 可以選擇一個元素並記錄它的事件行爲。新版 Firebug 在記錄事件時，可以指定事件類型，如下圖。
要記錄上面這個元素的 click 事件，可以只選擇“mouse”事件。但是 mouse 事件沒有進一步細分，控制檯裏基本全是 mousemove 信息，完全沒法用。所以我更推薦用控制檯提供的 monitorEvents 方法來完成此功能（Chrome 開發者工具同樣支持）：monitorEvents(document.body, 'click');複製代碼在命令行使用
這是個神奇的功能，在 Firebug 的很多面板都可以用。在一些對象（HTML 元素、HTTP 請求、CSS 規則Cookie 信息、JS 對象等）上右鍵並點擊“在命令行使用”，就會自動在控制檯命令行輸入 $p。也就是說在控制檯可以通過 $p 來使用這些對象，具體效果如下圖：
控制檯信息合併
這個功能沒啥多說的，印象中 Chrome 一直都是這樣。通過 console.info、console.log 等方法打印在控制檯的信息，如果連續多次都是一樣，會合並顯示並給出次數。
HTTP 請求時間線浮層改進
在 Firebug 的“網絡”面板下，鼠標停留在時間線（Timeline），會有浮層詳細的展示這個請求的一些網絡指標。現在這個指標使用了瀑布圖，更一目瞭然。
實際上，這個功能在 Chrome 開發者工具也一直存在，只是位置不同：
側面板支持隱藏
這個界面上的改動也沒什麼好說的。Firebug 的一些面板是分左右兩欄的，在分割線旁邊有個箭頭，點一下就可以收起右欄。
引用控制檯最近運算結果
這個功能上次介紹過，通過 $_，引用控制檯最近一次運算結果。把示例直接搬過來：> 1+1
2
> $_+1
3複製代碼getEventListeners 方法
getEventListeners 是 Firebug 控制檯新增的方法。顧名思義，傳一個 Element 或 window 進去，在控制檯返回這個元素上綁定的事件集合。
複製爲 cURL 命令
在“網絡”面板下，在任何一條請求上右鍵選擇“Copy as cURL”，就得到了一個 cURL 命令，可以直接用於終端發送相同的請求，前提是你的終端已經裝好了 curl（Mac 毫無壓力）。Chrome 同樣支持。
Console.log 支持 %f 格式
上次還說到 console.log 的 %f 不支持指定位數，Firebug 新版就已經支持了。試了下 Chrome 還是不行。> console.log('money: %.2f', 909232.12233893);
money: 909232.12複製代碼顯示/隱藏堆棧中的參數
在調試 JavaScript 時，經常會用到堆棧功能。現在新版 Firebug 增加了一個選項，可以顯示或隱藏堆棧中的參數。
CSS 面板的改進
CSS 面板也有了一些改進，增加了對 @media、@supports、@page、@-moz-keyframes、@-moz-document 等規則的顯示。
1.11 版引入的功能
下面這幾個功能是從 1.11 版開始支持的，個人感覺比較有用，一併介紹下。
include()。這也是一個控制檯方法，用於快速引入 JS 文件到當前頁面。有了它，我們就不用再創建 script 標籤再插入到文檔了。它的第一個參數接受一個 url 或別名；第二個參數用來定義別名，定義的別名是永久的，重啓 firefox 仍然可用；不傳參數時，include() 會顯示當前已經定義的別名和對應的 url。如下圖：
獲取匹配元素。
這個功能是根據指定的 CSS 選擇器，找到文檔中所有與之匹配的元素。選擇器可以在 CSS 規則上右鍵選擇或在右側直接輸入。
Performance Timing 可視化。
Performance timing 是一個新的 Api，用來返回頁面很多與性能有關的時間點。Firefox 實現了這一 Api，firebug 可以讓它更直觀的展示出來，只要在控制檯輸入 performance.timing 即可。如圖（點擊查看大圖）：
轉載自：JerryQu