Firebug及YSlow簡介與使用圖文詳解

Firebug本是Firefox瀏覽器下一個出色的網頁設計插件，隨着瀏覽器的發展，Firebug也推出了支持IE、Opera、Chrome的Firebug Lite。憑藉Firebug的出色代碼調試功能，firefox成爲了網頁設計人員的必備瀏覽器，爲了與其抗爭Chrome、IE、Opera等瀏覽器也不斷推出本身的網頁開發插件，但整體來講還是Firebug佔據了上風。

筆者在此就簡要介紹下Firebug的安裝和基本使用，其更多強大功能有待讀者自行挖掘實踐。
Firebug的官網地址是http://www.getfirebug.com，在此可得到適合不一樣瀏覽器的firefox版本，同時firefox也可經過火狐應用商店搜索得到該插件。如下以firefox下firebug爲例具體說明。

1、Firebug的安裝
安裝完畢最新版火狐瀏覽器後（本例版本爲5.0.1），點擊左上角firefox菜單，選擇附加組件，以下圖：

以後在出現的搜索欄中輸入「firebug」關鍵詞，出現firebug搜索結果，點擊安裝後，重啓瀏覽器便可完成安裝過程，以下圖：

2、Firebug的啓動
完成安裝，重啓瀏覽器後，便可按「F12」快捷鍵啓動Firebug插件，也可點擊firefox地址欄右邊firebug圖標啓動，啓動後，頁面將分欄顯示，Firebug各項功能顯示在下方，以下圖所示：

再次按下F12鍵或者Firebug右上角的關閉按鈕便可關閉Firebug。
Firefox的主要菜單選項有控制檯、HTML、CSS、腳本、DOM、網絡六個，上述功能的配合使用可以知足網頁設計的各項要求。
本例中多出的YSlow菜單選項是因爲瀏覽器已安裝YSlow插件的緣故，下文將有闡述。

3、Firebug功能介紹
一、控制檯（Console）功能：
控制檯得主要做用是用來顯示網頁各種錯誤信息，並可對日誌進行打印處理。同時能夠在進行javascript調試的時候看成命令行窗口使用，並經過概況子選項說明javascript代碼執行的相關信息。以下圖所示：

具體的firebug下控制檯應用，可參考此地址http://04101334.iteye.com/category/49170下講解。
二、HTML功能：
此菜單標籤功能，主要用於查看當前頁面的源代碼功能，並可進行編輯，時時顯示，從而實現頁面最佳效果。啓用此標籤後界面以下：

整個頁面被分爲左右兩部分，左邊顯示當前頁面的源代碼，右邊顯示頁面所包含的相關CSS樣式信息及DOM信息，較普通的源代碼顯示更爲的直觀和具體。
雙擊左邊源碼中任一元素的屬性值，出現可編輯懸浮，可對屬性進行編輯，並可便可查看修改效果。
三、CSS功能：
點擊CSS菜單標籤，可查看全部的CSS定義信息，同時也能夠經過雙擊來達到修改頁面樣式的效果，以下圖所示：

四、腳本（Javascript）功能：
腳本功能主要是一個腳本調試器，能夠進行單步調試、斷點設置、變量查看等功能，同時經過右邊的監控功能來實現腳本運行時間的查看和統計，提升運行效率，以下圖所示：

五、DOM功能：
該功能主要用於查看頁面DOM信息，經過提供的搜索功能實現DOM的快速準肯定位，並可雙擊來實現DOM節點屬性或值的修改，以下圖：

六、網絡（Net）功能：
該標籤功能主要用來監控網頁各組成元素的運行時間的信息，方便找出其中運行時間較慢的部分，進一步優化運行效率，以下圖：

4、YSlow簡介與使用
除了Firebug自帶的網絡監控功能之外，還有不少Firebug監控插件提供更爲詳細的監控信息報告，在此介紹其中的佼佼者，YSlow。
YSlow的下載地址爲：http://developer.yahoo.com/yslow，只有瀏覽器中安裝了Firebug後，YSlow才能成功顯示，安裝成功後將在firebug的網絡菜單選項後增長一個名爲YSlow的選項，如本文第一幅圖所示。
點擊YSlow，出現以下界面，選擇「run test」,其默認是頁面加載時自動運行YSlow，以下圖：

YSlow提供的三種不一樣的信息統計查看方式，分別爲Grade、Components、Statistics，下面分別介紹：
一、Grade
經過YSlow默認的23項性能測試規則（YSlow V2）對網頁測試後，給出網頁運行等級評定。等級爲A-F，其中A等級最高。若是某一測試規則與該頁面無關，則在前面出現N/A標識，以下圖：

除了對某一規則及網頁總體表現等級評定，YSlow還在每項規則評定後面給出了相應的參考建議。
性能測試規則能夠在YSlow的Rulesets中選擇，共有YSlow V二、Classic V一、Samll Site or Blog三類，其中分別含有若干可選規則，以下圖：

二、Components
顯示了網頁各組件的相關信息，雙擊組件名稱能夠展開，查看詳細信息，以下圖所示：

三、Statistics
該統計以餅狀圖的形式，顯示了在清空緩存和緩存加載兩種清空下，頁面打開的信息狀況，以下圖所示：

其中，左邊爲清空緩存的狀況，右邊則爲緩存加載時的數據。
YSlow除了提供上述三類統計之外，還在Tools選項中提供了幾種較爲實用的工具，主要包括按照不一樣要求顯示頁面的javascript並驗證，CSS信息收集和顯示，圖片優化建議等，具體可嘗試進行操做，以下圖所示：