掌握各種js調(diào)試技巧，在前端開(kāi)發(fā)中降低開(kāi)發(fā)成本，起到事半功倍的效果。譬如，快速定位問(wèn)題、降低故障概率、幫助分析邏輯錯(cuò)誤等等。多數(shù)瀏覽器都提供了DevTools 供我們調(diào)試 JavaScript 應(yīng)用程序，并且它們的使用方式類(lèi)似，只要我們學(xué)會(huì)了如何在一個(gè)瀏覽器上使用調(diào)試工具，就很容易在其他瀏覽器上使用它。

Alert調(diào)試

通過(guò)內(nèi)置于Window對(duì)象中的alert方法來(lái)調(diào)試，相信這個(gè)大家肯定都知道，可以一行一行的進(jìn)行判斷，是否走到此處。alert的調(diào)試方式很原始，它會(huì)阻塞UI和javascript的執(zhí)行，必須點(diǎn)擊'OK'按鈕才能繼續(xù)，非常低效。

Console

瀏覽器相繼推出了JS調(diào)試控制臺(tái)，支持使用類(lèi)似"console.log(xxxx)"的形式，在控制臺(tái)打印調(diào)試信息，而不直接影響頁(yè)面顯示。

JS斷點(diǎn)調(diào)試

JS斷點(diǎn)調(diào)試，即是在瀏覽器開(kāi)發(fā)者工具中為JS代碼添加斷點(diǎn)，讓JS執(zhí)行到某一特定位置停住，方便開(kāi)發(fā)者對(duì)該處代碼段的分析與邏輯處理。為了能夠觀察到斷點(diǎn)調(diào)試的效果，我們預(yù)先隨意準(zhǔn)備一段JS代碼：

3.1、Sources斷點(diǎn)

首先，測(cè)試代碼中我們通過(guò)上圖console的輸出結(jié)果可以看出代碼應(yīng)該是正常運(yùn)行了，但是為什么是應(yīng)該呢？因?yàn)楹瘮?shù)中加了一個(gè)隨機(jī)數(shù)，而最終結(jié)果是否真的是正確的呢？這是毫無(wú)意義的猜想，但是假設(shè)我現(xiàn)在就是要驗(yàn)證一下：函數(shù)傳入的兩個(gè)數(shù)、被加的隨機(jī)數(shù)，以及最終的總和。那么該怎么操作呢？

方法一，前面講過(guò)最普通的，無(wú)論使用alert還是console，我們可以這么來(lái)驗(yàn)證：

方法二，方法一的驗(yàn)證過(guò)程存在很明顯的弊端就是，添加了很多冗余代碼，接下來(lái)我們看一下使用斷點(diǎn)進(jìn)行驗(yàn)證，是否更加方便，先看一個(gè)如何加斷點(diǎn)，以及斷點(diǎn)后是什么效果：

如圖，給一段代碼添加斷點(diǎn)的流程是"F12（Ctrl + Shift + I）打開(kāi)開(kāi)發(fā)工具"——"點(diǎn)擊Sources菜單"——"左側(cè)樹(shù)中找到相應(yīng)文件"——"點(diǎn)擊行號(hào)列"即完成在當(dāng)前行添加/刪除斷點(diǎn)操作。當(dāng)斷點(diǎn)添加完畢后，刷新頁(yè)面JS執(zhí)行到斷點(diǎn)位置停住，在Sources界面會(huì)看到當(dāng)前作用域中所有變量和值，只需對(duì)每個(gè)值進(jìn)行驗(yàn)證即可完成我們題設(shè)驗(yàn)證要求。

那問(wèn)題來(lái)了，仔細(xì)的朋友會(huì)發(fā)現(xiàn)當(dāng)我的代碼執(zhí)行到斷點(diǎn)的時(shí)候，顯示的變量a和b的值是已經(jīng)進(jìn)行過(guò)加法運(yùn)算后的，我們看不到調(diào)用sum函數(shù)時(shí)初始傳入的10和20。那么該怎么辦呢？這就要回過(guò)頭來(lái)先學(xué)習(xí)一下斷點(diǎn)調(diào)試的一些基礎(chǔ)知識(shí)了。我們打開(kāi)Sources面板后其實(shí)會(huì)在界面中看到如下內(nèi)容，我們跟著鼠標(biāo)軌跡逐一看看都是什么意思：

從左到右，各個(gè)圖標(biāo)表示的功能分別為：

• Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點(diǎn)停止）。
• Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用（跳到下一行）。
• Step into next function call：進(jìn)入當(dāng)前函數(shù)。
• Step out of current function：跳出當(dāng)前執(zhí)行函數(shù)。
• Deactive/Active all breakpoints：關(guān)閉/開(kāi)啟所有斷點(diǎn)（不會(huì)取消）。
• Pause on exceptions：異常情況自動(dòng)斷點(diǎn)設(shè)置。

到此，斷點(diǎn)調(diào)試的功能鍵介紹得差不多了，接下來(lái)我們就可以一行一行去看我們的程序代碼，查看每一行執(zhí)行完畢之后，我們各個(gè)變量的變化情況了

如上，我們可以看到a、b變量從最初值，到中間加上隨機(jī)值，再到最后計(jì)算總和并輸出最終結(jié)果的整個(gè)過(guò)程，完成題設(shè)驗(yàn)證要求不在話(huà)下。

其余幾個(gè)功能鍵，我們稍微改動(dòng)一下我們的測(cè)試代碼，用一張gif圖來(lái)演示他們的使用方法：

這里需要注意一點(diǎn)，直接在代碼區(qū)打印變量值的功能是在較新版本的Chrome瀏覽器中才新增的功能，如果你還在使用較老版本的Chrome瀏覽器，可能無(wú)法直接在斷點(diǎn)的情況下查看變量信息，此時(shí)你可以將鼠標(biāo)移動(dòng)到變量名上短暫停頓則會(huì)出現(xiàn)變量值。也可以用鼠標(biāo)選中變量名稱(chēng)，然后右鍵"Add to watch"在Watch面板查看，此方法同樣適用于表達(dá)式。此外，你還可以在斷點(diǎn)情況下，切換到Console面板，直接在控制臺(tái)輸入變量名稱(chēng)，回車(chē)查看變量信息。該部分比較簡(jiǎn)單，考慮篇幅問(wèn)題，不在做圖演示。

3.2、Debugger斷點(diǎn)

所謂的Debugger斷點(diǎn)，其實(shí)是我自己給它命名的，專(zhuān)業(yè)術(shù)語(yǔ)我也不知道怎么說(shuō)。具體的說(shuō)就是通過(guò)在代碼中添加"debugger;"語(yǔ)句，當(dāng)代碼執(zhí)行到該語(yǔ)句的時(shí)候就會(huì)自動(dòng)斷點(diǎn)。接下去的操作就跟在Sources面板添加斷點(diǎn)調(diào)試幾乎一模一樣，唯一的區(qū)別在于調(diào)試完后需要?jiǎng)h除該語(yǔ)句。

既然除了設(shè)置斷點(diǎn)的方式不一樣，功能和Sources面板添加斷點(diǎn)效果一樣，那么為什么還會(huì)存在這種方式呢？我想原因應(yīng)該是這樣的：我們?cè)陂_(kāi)發(fā)中偶爾會(huì)遇到異步加載html片段（包含內(nèi)嵌JS代碼）的情況，而這部分JS代碼在Sources樹(shù)種無(wú)法找到，因此無(wú)法直接在開(kāi)發(fā)工具中直接添加斷點(diǎn)，那么如果想給異步加載的腳本添加斷點(diǎn)，此時(shí)"debugger;"就發(fā)揮作用了。我們直接通過(guò)gif圖看看他的效果：

總結(jié)

調(diào)試，是在項(xiàng)目開(kāi)發(fā)中非常重要的環(huán)節(jié)，不僅可以幫助我們快速定位問(wèn)題，還能節(jié)省我們的開(kāi)發(fā)時(shí)間。熟練掌握各種調(diào)試手段，定當(dāng)為你的職業(yè)發(fā)展帶來(lái)諸多利益，但是，在如此多的調(diào)試手段中，如何選擇一個(gè)適合自己當(dāng)前應(yīng)用場(chǎng)景的，這需要經(jīng)驗(yàn)，需要不斷嘗試積累。

到此這篇關(guān)于前端中的JS使用調(diào)試技巧的文章就介紹到這了,更多相關(guān)JS調(diào)試技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論