當(dāng)前位置: 首頁 > 攻略教程 > 軟件教程 > 火狐瀏覽器調(diào)試工具詳細(xì)操作方法

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

時間:2024-08-10 11:13:08 編輯:易網(wǎng)VIP游戲門戶 閱讀:0

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

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

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

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

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

因?yàn)檎{(diào)試基本上只用到前四個圖標(biāo),所以在此,只介紹前四個

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

鼠標(biāo)點(diǎn)擊這個圖標(biāo)后,鼠標(biāo)在頁面上就可以選擇元素,點(diǎn)擊選擇的元素,就會迅速定位到該元素的代碼上。當(dāng)頁面元素非常多時,用這個方法選擇要找到的元素非常方便。

2、查看器

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

3、控制臺

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

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

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

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

4、調(diào)試器

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

設(shè)置斷點(diǎn)

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

這是頁面刷新后,左上角的四個圖標(biāo)。

第一個圖標(biāo)(F8),當(dāng)你設(shè)置兩個或兩個以上的斷點(diǎn)時,點(diǎn)擊一下,直接運(yùn)行到下一個斷點(diǎn)。

第二圖標(biāo)(F10),當(dāng)點(diǎn)擊這個圖標(biāo)時,相當(dāng)于一個函數(shù)一個函數(shù)的執(zhí)行

第三個圖標(biāo)(F11),當(dāng)點(diǎn)擊這個圖標(biāo)時,相當(dāng)于一步一步的執(zhí)行。

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

點(diǎn)擊添加監(jiān)視表達(dá)式,將你需監(jiān)視的變量寫進(jìn)去即可

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

5、條件斷點(diǎn)

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

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