Firebug介紹及使用技巧

2022-03-20 09:51:09 字數 1261 閱讀 3256

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...