火狐瀏覽器調(diào)試工具詳細操作方法

剛?cè)胧只鸷鼮g覽器的用戶，大概對調(diào)試工具還不清楚，現(xiàn)在就跟著小編一起來看一下火狐瀏覽器調(diào)試工具詳細操作方法吧。

火狐瀏覽器調(diào)試工具詳細操作方法

先打開火狐瀏覽器的調(diào)試工具，下面就是調(diào)試工具欄

因為調(diào)試基本上只用到前四個圖標，所以在此，只介紹前四個

1、從頁面中選擇一個元素

鼠標點擊這個圖標后，鼠標在頁面上就可以選擇元素，點擊選擇的元素，就會迅速定位到該元素的代碼上。當頁面元素非常多時，用這個方法選擇要找到的元素非常方便。

2、查看器

這個圖標的功能是，顯示web頁面代碼的結(jié)構(gòu)，當鼠標在代碼中移動到某個元素的上面時，web頁面的這個元素就會高亮顯示。

3、控制臺

一般調(diào)試時在代碼中能使用console.log(‘要輸出的內(nèi)容’)這條語句在控制臺中查看輸出，用于調(diào)試簡單的錯誤。

控制臺頁面是與當前打開的頁面處于同一個環(huán)境的，也就是說，當前頁面的控制臺只對當前頁面有效，控制臺能看做是頁面的js運行的一個延伸。而且，控制臺可以輸入輸出，也可更改頁面的顯示。

如上圖，改變了頁面的顯示，函數(shù)聲明這個地方，可能會根據(jù)瀏覽器的版本不同而輸出有所不同。

4、調(diào)試器

設(shè)置斷點

這是頁面刷新后，左上角的四個圖標。

第一個圖標(F8)，當你設(shè)置兩個或兩個以上的斷點時，點擊一下，直接運行到下一個斷點。

第二圖標(F10)，當點擊這個圖標時，相當于一個函數(shù)一個函數(shù)的執(zhí)行

第三個圖標(F11)，當點擊這個圖標時，相當于一步一步的執(zhí)行。

上述三個圖標，經(jīng)常一起用，用時觀察右側(cè)欄顯示。

點擊添加監(jiān)視表達式，將你需監(jiān)視的變量寫進去即可

5、條件斷點

在行數(shù)上鼠標右單擊，選擇添加條件斷點，在彈出輸入框內(nèi)輸入條件，當符合條件時，斷點停止執(zhí)行。

以上就是火狐瀏覽器調(diào)試工具詳細操作方法，大家都學會了吧。