FireBug圖文詳解

Firebug是firefox下的一個外掛程式,能夠調試所有網站語言，如HTML、CSS等，但FireBug最吸引我的就是javascript調試功能，使用起來非常方便，而且在各種瀏覽器下都能使用。

Firefox的主要菜單選項有控制台、HTML、CSS、指令碼、DOM、網路六個，Firebug從各個不同的角度剖析Web頁面內部的細節層面，上述功能的配合使用能夠滿足網頁設計的各項要求。

Firebug外掛程式展開圖示

1、控制台（console）功能：

啟用此標籤後介面如下：

作用：顯示網頁各類錯誤資訊，並可對日誌進行列印處理。

特色：

詳細提示錯誤：顯示當前頁面中的javascript錯誤以及警告，並提示出錯的檔案和行號，方便調試。

查看AJAX黑幕：調試Ajax時，能看到每一個XMLHttpRequests請求post出去的參數、 URL、http頭以及回饋的內容，原本幕後運作的程式展示在面前。

查看運行資訊：可以查看變數內容及JAVASCRIPT中運行期的資訊。

查看指令碼的log：Firebug的日誌輸出有多種格式及文法，還可定製彩色輸出，比起單調的alert，顯然更加方便。

2、HTML功能

啟用此標籤後介面如下：

作用：用於查看當前頁面的原始碼功能，並可進行編輯，時時顯示，從而實現頁面最佳效果。

特色：

結構清晰：經過格式化的HTML代碼，具有清晰的層次，可以清晰範編程標籤之間的從屬關係，

標識DOM層次，清晰列出HTML元素的parent、child、root元素，配合CSS查看器更見邊界的分析頁面的DIV+CSS。

直接修改，即時顯示：可以在HTML查看器中直接修改HTML原始碼，並且瀏覽器中第一時間看到修改後的效果。

高亮顯示頁面內容改變：若HTML頁面元素的樣式或背景色被改變，將以黃色高亮顯示。

所見即所得 (WYSIWYG)：利用Inspect檢查功能，用滑鼠選定頁面的某塊區塊，即可查看相應的HTML原始碼和CSS樣式表。

3、CSS功能

啟用此標籤後介面如下：

作用：如今網頁多採用CSS+DIV，其中DIV可以精簡HTML代碼，CSS用於控制頁面樣式。CSS標籤，用於查看所有的CSS定義資訊，同時可編輯達到修改頁面樣式的效果。

特色：

自下向上列出每一個 CSS樣式表的從屬繼承關係

以在這個查看器中直接添加、修改、刪除一些CSS樣式表屬性，並在當前頁面中 直接看到修改後的結果。

典型應用：根據需要隨意挪動像素。

智能提示：通過上下方向鍵查看常用樣式表屬性的值。

Firebug 的詳細介紹：請點這裡
Firebug 的：請點這裡

Nginx+Firebug 讓瀏覽器告訴你負載平衡將請求分到了哪台伺服器

1 2 下一頁