firebug工具介紹課件

北京傳智播客教育Firebug工具介紹傳智.急先鋒Firebug是網(wǎng)頁瀏覽器Mozilla

Firefox

下的一款開發(fā)類插件，現(xiàn)屬于

Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript

控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析

Web頁面內(nèi)部的細節(jié)層面，給Web開發(fā)者帶來很大的便利。例如Yahoo!

的網(wǎng)頁速度優(yōu)化建議工具YSlow。Firebug也是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何網(wǎng)站的CSS、HTML、DOM

以及JavaScript

代碼。Firebug官方網(wǎng)址：北京傳智播客教育Firebug介紹北京傳智播客教育Firebug主要功能網(wǎng)絡(luò)監(jiān)視器：Firebug的網(wǎng)絡(luò)監(jiān)視器能將頁面中的CSS、javascript以及網(wǎng)頁中引用的圖片載入所消耗的時間以矩狀圖呈現(xiàn)出來。Javascript調(diào)試器：這是一個很不錯的javascript腳本調(diào)試器，占用空間不大，但是單步調(diào)試、設(shè)置斷點、變量查看窗口一個不少。Console控制臺：控制臺能夠顯示當前頁面中的javascript錯誤以及警告，并提示出錯的文件和行號，方便調(diào)試，這些錯誤提示比起瀏覽器本身提

供的錯誤提示更加詳細且具有參考價值。DOM查看器：Firebug的DOM查看器卻能方便地瀏覽DOM的內(nèi)部結(jié)構(gòu)，幫助你快速定位DOM對象。查看和修改HTML、CSS調(diào)試及CSS尺標Firebug安裝安裝完畢最新版火狐瀏覽器，例如Firefox-setup_20.0.1.4847.exe。點擊左上角firefox菜單，選擇附加組件，如下圖：北京傳智播客教育Firebug在線安裝安裝完畢最新版火狐瀏覽器，例如Firefox-setup_20.0.1.4847.exe。點擊左上角firefox菜單，選擇附加組件，如下圖：之后在出現(xiàn)的搜索欄中輸入“firebug”關(guān)鍵詞，出現(xiàn)firebug搜索結(jié)果，點擊安裝后，重啟瀏覽器即可完成安裝過程。北京傳智播客教育Firebug離線安裝安裝完畢最新版火狐瀏覽器，例如Firefox-setup_20.0.1.4847.exe。在Firebug官方網(wǎng)站上，下載最新版的Firebug安裝包。例如：firebug.xpi打開火狐瀏覽器，將Firebug安裝包拖動到火狐瀏覽器中。點擊“安裝”后，重啟瀏覽器。完成安裝！北京傳智播客教育驗證Firebug是否安裝成功安裝后，再次打開火狐瀏覽器。在瀏覽器的右上角出現(xiàn)Firebug圖標：點擊Firebug圖標后，瀏覽器中出現(xiàn)如下界面：北京傳智播客教育使用Firebug對javascript調(diào)試打開Firebug界面后，調(diào)整到腳本界面：啟用腳本調(diào)試