js斷點(diǎn)調(diào)試經(jīng)驗(yàn)分享

我們給大家詳細(xì)分析了一下在JS調(diào)試的時(shí)候經(jīng)常用到的斷點(diǎn)調(diào)試，并把經(jīng)驗(yàn)和技巧做了總結(jié)，以下是全部?jī)?nèi)容：

1.斷點(diǎn)調(diào)試是啥？難不難？

斷點(diǎn)調(diào)試其實(shí)并不是多么復(fù)雜的一件事，簡(jiǎn)單的理解無(wú)外呼就是打開瀏覽器，打開sources找到j(luò)s文件，在行號(hào)上點(diǎn)一下罷了。操作起來似乎很簡(jiǎn)單，其實(shí)很多人糾結(jié)的是，是在哪里打斷點(diǎn)？（我們先看一個(gè)斷點(diǎn)截圖，以chrome瀏覽器的斷點(diǎn)為例）

步驟記住沒？

用chrome瀏覽器打開頁(yè)面 → 按f12打開開發(fā)者工具 → 打開Sources → 打開你要調(diào)試的js代碼文件 → 在行號(hào)上單擊一下，OK!恭喜你的處女?dāng)帱c(diǎn)打上了,哈哈~~

2.斷點(diǎn)怎么打才合適？

打斷點(diǎn)操作很簡(jiǎn)單，核心的問題在于，斷點(diǎn)怎么打才能夠排查出代碼的問題所在呢？下面我繼續(xù)舉個(gè)例子方便大家理解，廢話不多說，上圖：

假設(shè)我們現(xiàn)在正在實(shí)現(xiàn)一個(gè)加載更多的功能，如上圖，但是現(xiàn)在加載更多功能出現(xiàn)了問題，點(diǎn)擊以后數(shù)據(jù)沒有加載出來，這時(shí)候我們第一時(shí)間想到的應(yīng)該是啥？（換一行寫答案，大家可以看看自己的第一反應(yīng)是啥）

我最先想到的是，我點(diǎn)擊到底有沒有成功？點(diǎn)擊事件里的方法有沒有運(yùn)行？好，要想知道這個(gè)問題的答案，我們立馬去打個(gè)斷點(diǎn)試試看，斷點(diǎn)打在哪？自己先琢磨一下。

接著上圖：

各位想到?jīng)]？沒錯(cuò)，既然想知道點(diǎn)擊是否成功，我們當(dāng)然是在代碼中的點(diǎn)擊事件處添加一個(gè)斷點(diǎn)，切記不要添加在226行哦，因?yàn)楸粓?zhí)行的是click方法內(nèi)的函數(shù)，而不是226行的選擇器。斷點(diǎn)現(xiàn)在已經(jīng)打上了，然后做什么呢？自己再琢磨琢磨~

繼續(xù)上圖：

然后我們當(dāng)然是回去點(diǎn)擊加載更多按鈕啦，為什么？額。。。如果你這么問，請(qǐng)?jiān)试S我用這個(gè)表情，不點(diǎn)擊加載更多按鈕，怎么去觸發(fā)點(diǎn)擊事件？不觸發(fā)點(diǎn)擊事件，怎么去執(zhí)行點(diǎn)擊事件里的函數(shù)？咆哮狀。。不過我相信大家肯定不會(huì)問這么low的問題~不瞎扯了~

繼續(xù)正題，上面的圖就是點(diǎn)擊加載更多按鈕后的情況，我們可以看到左側(cè)的頁(yè)面被一個(gè)半透明的層給蓋住了，頁(yè)面上方還有一串英文和兩個(gè)按鈕，右側(cè)代碼227行被添加上了背景色，出現(xiàn)這個(gè)情況，先不管那些按鈕英文是啥意思有啥作用，你從這個(gè)圖得到了什么信息？繼續(xù)琢磨琢磨~

如果出現(xiàn)了上圖這個(gè)情況，說明一點(diǎn)，click事件中的函數(shù)被調(diào)用了，進(jìn)一步說明了點(diǎn)擊事件生效。那么我們對(duì)于這個(gè)問題產(chǎn)生的第一個(gè)“犯罪嫌疑人”就被排除了。

補(bǔ)充一下：

如果沒有出現(xiàn)上面的情況咋辦？那是不是說明點(diǎn)擊事件沒有生效呢？那是什么導(dǎo)致點(diǎn)擊事件沒有生效？大家自己思考思考~

可能導(dǎo)致點(diǎn)擊事件沒生效的原因很多，比多選擇器錯(cuò)誤，語(yǔ)法錯(cuò)誤，被選擇的元素是后生成的等。怎么解決呢？

選擇器錯(cuò)誤，大家可以繼續(xù)往后看到console部分的內(nèi)容，我想大家就知道怎么處理了

語(yǔ)法錯(cuò)誤，細(xì)心排查一下，不熟悉的語(yǔ)法可以百度對(duì)比一下

被選擇的元素是后生成的，最簡(jiǎn)單的處理就是使用.on()方法去處理，這個(gè)東東帶有事件委托處理，詳情可以自行百度。

那么接下來”犯罪嫌疑人“的身份鎖定在哪里呢？

我們將目光投向事件內(nèi)部，click事件觸發(fā)了，那么接下來的問題就是它內(nèi)部的函數(shù)問題了。如果你要問為什么？請(qǐng)給我一塊豆腐。。。

打個(gè)比方，給你一支筆，讓你寫字，然后你在紙上寫了一個(gè)字，發(fā)現(xiàn)字沒出來，為啥？你說我寫了呀，紙上都還有劃痕。那是不是可能筆沒有墨水或者筆尖壞了了？這個(gè)例子和點(diǎn)擊加載更多一個(gè)道理，寫字這個(gè)動(dòng)作就是點(diǎn)擊操作，而內(nèi)部函數(shù)就是墨水或者筆尖。明白了不~

接著我們分析下點(diǎn)擊事件里面的內(nèi)容，里面包含三句話，第一句話是變量i自增長(zhǎng)，第二句話是給按鈕添加一個(gè)i標(biāo)簽，第三句話是調(diào)用請(qǐng)求數(shù)據(jù)的方法。

就通過這三句話的本身作用，我們可以將較大一部分嫌疑放在第三句話，一小部分放在第一句和第二句話上，有人可能會(huì)疑惑，第二句話怎么會(huì)有嫌疑呢？他的作用只不過是添加一個(gè)標(biāo)簽，對(duì)于數(shù)據(jù)完全沒有影響啊，確實(shí)，這句話對(duì)于數(shù)據(jù)沒有影響，但是出于嚴(yán)謹(jǐn)考慮，它仍然有可能出錯(cuò)，例如它要是少了一個(gè)分號(hào)呢？或者句子內(nèi)部某個(gè)符號(hào)錯(cuò)誤呢？往往就是這種小問題浪費(fèi)我們很多時(shí)間。

好，為了進(jìn)一步鎖定”犯罪嫌疑人“，給大家介紹一個(gè)工具，也是上圖出現(xiàn)兩個(gè)圖標(biāo)之一，見下圖：

這個(gè)小圖標(biāo)的功能叫”逐語(yǔ)句執(zhí)行“或者叫”逐步執(zhí)行“，這是我個(gè)人理解的一個(gè)叫法，意思就是，每點(diǎn)擊它一次，js語(yǔ)句就會(huì)往后執(zhí)行一句，它還有一個(gè)快捷鍵，F(xiàn)10。下圖示范一下它被點(diǎn)擊以后的效果：

我單擊了兩次這個(gè)按鈕（或者使用F10快捷鍵），js代碼從227行執(zhí)行到了229行，所以我管它叫”逐語(yǔ)句執(zhí)行“或者”逐步執(zhí)行“。這個(gè)功能非常的實(shí)用，大部分的調(diào)試都會(huì)使用到它。

上面介紹到我單擊了兩次“逐語(yǔ)句執(zhí)行”按鈕，代碼從227行運(yùn)行到229行，大家覺得這意味著啥？是不是說明從語(yǔ)法上來說，前兩句是沒有問題的，那么是不是也同時(shí)意味著前兩句就排除嫌疑了呢？我看不然。

大家都知道，加載更多就是一個(gè)下一頁(yè)的功能，而其中最核心的一個(gè)就是傳給后臺(tái)的頁(yè)碼數(shù)值，每當(dāng)我點(diǎn)擊加載更多按鈕一次，頁(yè)碼的數(shù)值就要加1，所以如果下一頁(yè)的數(shù)據(jù)沒出來，是不是有可能是因?yàn)轫?yè)碼數(shù)值也就是[i變量]（下面統(tǒng)一稱呼i）有問題？那么如何排查頁(yè)碼是否存在問題呢？大家自己先思考思考。

下面教大家兩種查看頁(yè)碼數(shù)值i]實(shí)際輸出值的方法，上圖：

第一種：

操作步驟如下：

1.仍然是在227行打上斷點(diǎn) → 2. 點(diǎn)擊加載更多按鈕 → 3. 單擊一次“逐語(yǔ)句執(zhí)行“按鈕，js代碼執(zhí)行到228行 → 4.用鼠標(biāo)選中i++（什么叫選中大家里不理解？就是你要復(fù)制一個(gè)東西，是不是要選中它？對(duì)，就是這個(gè)選中） → 5. 選中以后，鼠標(biāo)懸浮在目標(biāo)上方，你就看到上圖的結(jié)果。

第二種：

這個(gè)方法其實(shí)和第一種差不多，只不過是在控制臺(tái)輸出i的值，大家只需要按照第一種方法執(zhí)行到第三步 → 4. 打開和sources同一級(jí)欄目的console → 5. 在console下方的輸入欄里輸入i → 6. 按enter回車鍵即可。

上面的第二種方法里，提到了console這個(gè)東西，我們可以稱呼它為控制臺(tái)或者其他什么都可以，這不重要~console的功能很強(qiáng)大，在調(diào)試的過程中，我們往往需要知道某些變量的值到底輸出了什么，或者我們使用選擇器[$”.p”)這種]是否選中了我們想要的元素等，都可以在控制臺(tái)打印出來。當(dāng)然直接用第一種方法也可以。

給大家示范一下在console里打印我們想要選中的元素。上圖~

在控制臺(tái)中輸入$(this)，即可得到選擇的元素，沒錯(cuò)，正是我們所點(diǎn)擊的對(duì)象——加載更多按鈕元素。

在這里給大家說說我對(duì)console這個(gè)控制臺(tái)的理解：這個(gè)東東就是一個(gè)js解析器，是瀏覽器本身用來解析運(yùn)行js的家伙，只不過瀏覽器通過console讓我們開發(fā)者在調(diào)試過程中，可以控制js的運(yùn)行以及輸出。通過上面的兩種方法，大家可能覺得使用起來很簡(jiǎn)單，但是我要給大家提醒一下，或者說是一些新手比較容易遇到的困惑。

困惑一：在沒有打斷點(diǎn)的情況下，在console輸入i，結(jié)果console報(bào)錯(cuò)了。

這應(yīng)該是新手很常見的問題，為什么不打斷點(diǎn)我就沒有辦法在控制臺(tái)直接輸出變量的值呢？個(gè)人理解這時(shí)候i只是一個(gè)局部變量，如果不打上斷點(diǎn)，瀏覽器會(huì)把所有的js全部解析完成，console并不能訪問到局部變量，只能訪問到全局變量，所以這時(shí)候console會(huì)報(bào)錯(cuò)i未定義，但是當(dāng)js打上斷點(diǎn)時(shí)，console解析到了局部變量i所在的函數(shù)內(nèi)，這時(shí)候i是能夠被訪問的。

困惑二：為什么我直接在console里輸入$(“.xxx”)能打印出東西來呢？

很簡(jiǎn)單，console本身就是一個(gè)js解析器，$(“.xxx”)就是一個(gè)js語(yǔ)句，所以自然console能夠解析這個(gè)語(yǔ)句然后輸出結(jié)果。

介紹完“逐語(yǔ)句執(zhí)行”按鈕和console控制臺(tái)的用法，最后再介紹一個(gè)按鈕，上圖：

這個(gè)按鈕我稱呼它為“逐過程執(zhí)行”按鈕，和“逐語(yǔ)句執(zhí)行”按鈕不同，“逐過程執(zhí)行”按鈕常用在一個(gè)方法調(diào)用多個(gè)js文件時(shí)，涉及到的js代碼比較長(zhǎng)，則會(huì)使用到這個(gè)按鈕。

上圖：

假設(shè)上圖我只在227行打了個(gè)斷點(diǎn)，然后一直點(diǎn)擊逐語(yǔ)句執(zhí)行”按鈕到229行，這時(shí)候如果再點(diǎn)擊一次“逐語(yǔ)句執(zhí)行”按鈕呢？則會(huì)進(jìn)入下圖的js里：

這些都是zepto庫(kù)文件的內(nèi)容，沒啥好看的，里面運(yùn)行很復(fù)雜，我們不可能一直使用“逐語(yǔ)句執(zhí)行”按鈕，這樣你會(huì)發(fā)現(xiàn)你按了大半天還在庫(kù)文件里面繞。。。這時(shí)候咋辦？那就該“逐過程執(zhí)行”按鈕上場(chǎng)了。

上圖：

我除了在227行打了一個(gè)斷點(diǎn)，同時(shí)還在237行打了一個(gè)斷點(diǎn)，當(dāng)我們運(yùn)行到229行時(shí)，直接單擊“逐過程執(zhí)行”按鈕，你會(huì)發(fā)現(xiàn)，js直接跳過了庫(kù)文件，運(yùn)行到了237行，大家可以自己使用體驗(yàn)一下。

最后總結(jié)：

本文主要介紹了“逐語(yǔ)句執(zhí)行”按鈕、“逐過程執(zhí)行”按鈕、console控制臺(tái)這三個(gè)工具，以及調(diào)試bug時(shí)的一些思路。工具的用法我就不再贅述了，大家知道用法就行，具體怎么去更合理的使用，還需要大家通過大量的實(shí)踐去總結(jié)提升~

我其實(shí)在本文主要想講的是調(diào)試bug的一個(gè)思路，但是由于選的例子涉及東西太多。。。怕全部寫下來內(nèi)容太長(zhǎng)，大家也沒興趣看，所以我就簡(jiǎn)單的選了一部分給大家講解，不知道大家有沒有收獲。別看我調(diào)試三句話寫了一堆的東西，如果真的在實(shí)際項(xiàng)目中你也像我這樣去做，估計(jì)你調(diào)試一個(gè)Bug的時(shí)間會(huì)比寫一個(gè)腳本的時(shí)間還長(zhǎng)很多。。。在實(shí)際情況下，我們應(yīng)該養(yǎng)成拿到問題的第一時(shí)間，自行在腦海中排查問題，找到最有可能出現(xiàn)問題的點(diǎn)，如果沒辦法迅速的排查出最重要的點(diǎn)，那么你可以使用最麻煩但是很靠譜的方法，利用“逐語(yǔ)句執(zhí)行”按鈕將整個(gè)和問題相關(guān)的js依次去執(zhí)行一遍，在執(zhí)行的過程中，自己也跟著理清思路，同時(shí)注意下每個(gè)變量的值以及選擇器選中的元素是否正確，一般來說，這樣做一遍下來，bug都解決的差不多了。

所以個(gè)人認(rèn)為，我們調(diào)試bug的思路應(yīng)該是這樣的：首先，js是否成功的執(zhí)行進(jìn)來；其次，js是否存在邏輯問題，變量問題，參數(shù)問題等等；最后，如果上述都沒有問題，請(qǐng)仔細(xì)查看各種符號(hào)