快捷導(dǎo)航

JS打斷點(diǎn)的六種常用姿勢(shì)你用過(guò)幾種

更新時(shí)間：2025年04月02日 11:13:13 作者：LLLibra146

JS斷點(diǎn)調(diào)試,即是在瀏覽器開(kāi)發(fā)者工具中為JS代碼添加斷點(diǎn),讓JS執(zhí)行到某一特定位置停住,方便開(kāi)發(fā)者對(duì)該處代碼段的分析,這篇文章主要介紹了JS打斷點(diǎn)的六種常用姿勢(shì)的相關(guān)資料,需要的朋友可以參考下

正常斷點(diǎn)

說(shuō)到 JS 斷點(diǎn)，大家可能很熟悉了，在 JS 逆向中，斷點(diǎn)是很常用的一種調(diào)試手段，只要在想要打斷點(diǎn)的行號(hào)上輕輕的點(diǎn)一下，斷點(diǎn)就打好了。

或者在行號(hào)上點(diǎn)擊右鍵，選擇斷點(diǎn)也可以添加一個(gè)斷點(diǎn)在指定的位置。

這個(gè)時(shí)候重新刷新頁(yè)面，如果斷點(diǎn)的位置沒(méi)錯(cuò)的話，JS 就會(huì)斷在斷點(diǎn)的位置，這個(gè)時(shí)候可以在控制臺(tái)查看變量的值，甚至可以修改任意變量的值，修改后的值會(huì)立即生效。

正常斷點(diǎn)的顏色是藍(lán)色的。

條件斷點(diǎn)

和正常的斷點(diǎn)一樣，在行號(hào)處點(diǎn)擊右鍵，選擇條件斷點(diǎn)，會(huì)彈出一個(gè)輸入框，輸入所需要斷下的條件，回車(chē)即可。

條件斷點(diǎn)的顏色是黃色的，而且會(huì)帶一個(gè)小問(wèn)號(hào)在行號(hào)的前面。條件斷點(diǎn)只會(huì)在條件滿足的時(shí)候斷下，適合在需要特定條件調(diào)試的情況下使用。

日志斷點(diǎn)

還有一個(gè)是日志斷點(diǎn)，它不會(huì)在斷點(diǎn)的位置斷下，但是會(huì)在命中日志斷點(diǎn)的時(shí)候輸出一行日志。

打好的斷點(diǎn)會(huì)變成粉紅色，而且在命中斷點(diǎn)的時(shí)候會(huì)輸出 num 和 data 的值，在日志的右側(cè)還會(huì)輸出斷點(diǎn)所在的行號(hào)。條件斷點(diǎn)一般在 jsvmp 中會(huì)經(jīng)常用到，因?yàn)?jsvmp 有自己的自定義指令和解釋器，一般會(huì)選擇使用插樁的方式將不同變量和寄存器的值打印出來(lái)分析算法。

XHR 斷點(diǎn)

XHR 斷點(diǎn)可以在任意 XHR 請(qǐng)求發(fā)送的時(shí)候斷下，也可以在包含某些關(guān)鍵字的請(qǐng)求發(fā)送的時(shí)候斷下。

如果想要在包含某個(gè)關(guān)鍵字的時(shí)候斷下，可以點(diǎn)擊加號(hào)，填寫(xiě)想要斷下的關(guān)鍵字即可。

斷下時(shí)，會(huì)自動(dòng)斷在 send 方法的位置，可以看到左側(cè)并沒(méi)有添加正常斷點(diǎn)，而且右側(cè)斷點(diǎn)類(lèi)型的文字會(huì)自動(dòng)變成黃色。

事件斷點(diǎn)

在 XHR 斷點(diǎn)的下方，有一個(gè)事件監(jiān)聽(tīng)器斷點(diǎn)。

它可以對(duì)幾乎所有的事件下斷點(diǎn)，例如鼠標(biāo)的點(diǎn)擊事件，移動(dòng)事件，雙擊事件等等，一般用于在驗(yàn)證碼滑塊或者點(diǎn)擊類(lèi)的驗(yàn)證碼邏輯調(diào)試的時(shí)候會(huì)用到。

選中單擊斷點(diǎn)后，在頁(yè)面的任意位置點(diǎn)擊一下，會(huì)自動(dòng)觸發(fā)斷點(diǎn)，可以看到斷點(diǎn)的處理函數(shù)會(huì)傳入一個(gè) g 參數(shù)，這個(gè)參數(shù)中保存了我當(dāng)前點(diǎn)擊鼠標(biāo)的位置，還有其他很多參數(shù)，用于處理單擊事件。

DOM 斷點(diǎn)

DOM 斷點(diǎn)一般用于調(diào)試在有新的元素新建或者刪除的時(shí)候用。

例如我在這里添加一個(gè)子樹(shù)修改斷點(diǎn)，因?yàn)樵诜?yè)的時(shí)候肯定會(huì)修改子樹(shù)的。

添加好 DOM 斷點(diǎn)后，元素前面會(huì)有一個(gè)小小的藍(lán)色點(diǎn)點(diǎn)，同時(shí)也可以在 DOM 斷點(diǎn)的標(biāo)簽中看到已經(jīng)對(duì)哪一個(gè)元素添加了 DOM 斷點(diǎn)。現(xiàn)在點(diǎn)擊下一頁(yè)試試：

斷點(diǎn)斷下來(lái)了，看右側(cè)的調(diào)用棧，先是發(fā)送請(qǐng)求，然后調(diào)用了 success 方法解析數(shù)據(jù)，最終通過(guò) jQuery 來(lái)將數(shù)據(jù)填充到 DOM 樹(shù)中。如果沒(méi)有 XHR 斷點(diǎn)的話，也可以使用這種方式來(lái)查找請(qǐng)求發(fā)送的位置。