firebug是網頁瀏覽器firefox下的一款開發除錯工具。安裝firebug後在瀏覽器的外掛程式工具欄中(上方)會有乙個小甲蟲的圖示。 f12開啟和關閉firebug視窗。
提示每個功能標籤可以通過點選下拉列表設定為「啟用」或「停用」。
小甲蟲可以設定顯示或不顯示某些功能標籤。
功能標籤右側搜尋框可以進行相應的搜尋。
定位元素
1、ctrl+shift+c 快速定位元素
2、在網頁選中元素,右鍵點選「使用firebug檢視元素」也可以定位元素
3、點選左上第二個圖示,在頁面選擇要定位的元素
4、右上角搜尋框可以輸入要定位的元素
編輯元素
1、雙擊要編輯的html元素
2、選中要編輯的元素右鍵點選「編輯html」
處理css樣式
1、在右側樣式標籤可以檢視元素的樣式。
2、雙擊相應的樣式可以進行修改。
3、點選樣式前面的啟用/禁用圖示可以啟用/禁用樣式。
4、雙擊樣式的結束位置可以新增一行新樣式。
5、雙擊樣式按delete即可刪除樣式。
6、滑鼠上下鍵調整css避屬性數字的大小(ctrl慢調、shift快調)。
7、也可以點選css樣式位址,在原始碼中進行修改。
1、利用console向控制台輸出一些log及其它除錯資訊,控制台可以顯示出這些資訊,常用consolog函式如下:
console.log();
console.info();
console.dir();
console.debug();
console.warn();
console.error();
console.group();
console.groupend();
console.time();
console.timeend();
2、在控制台輸入js**,可以執行輸入的js**
3、輸入相應的js**內容後點選"tab"自動提示
1、檢視js**,設定斷點(點選左側行號即可)
2、除錯js功能**
f8:繼續
f10:單步跳過
f11:單步進入
shift+f11:單步退出
3、console.trace()可以知道函式如何被呼叫。
1、點選所有可以點選的地方,發現其它功能
2、所有點選的地方右鍵功能
3、所有下拉列表功能
4、小甲蟲的選單功能
5、各處瀏覽器及開發人員工具結合使用
原創 FireBug工具介紹及使用技巧
原創 firebug工具介紹及使用技巧 firebug估計各位都不陌生,firefox瀏覽器下的web開發神器,本來打算寫乙個很詳細的firebug使用手冊,最後想想還是算了,工具類的產品更新速度很快,可能今天寫個最新版本的操作手冊,過不了多長時間很多介面和功能都不一樣了,可操作性不好,最好還是放棄...
原創 FireBug工具介紹及使用技巧
原創 firebug工具介紹及使用技巧 firebug估計各位都不陌生,firefox瀏覽器下的web開發神器,本來打算寫乙個很詳細的firebug使用手冊,最後想想還是算了,工具類的產品更新速度很快,可能今天寫個最新版本的操作手冊,過不了多長時間很多介面和功能都不一樣了,可操作性不好,最好還是放棄...
firebug 的簡單使用
console.log 除錯 console.error 錯誤資訊 console.group 第一組 console.log 1 console.groupend 第一組 console.group 第一組 console.log 2 console.groupend 第一組 console.di...