1.斷點調試是啥俯艰？難不難？

斷點調試其實并不是多么復雜的一件事历涝，簡單的理解無外呼就是打開瀏覽器薪缆，打開sources找到js文件炬称，在行號上點一下罷了汁果。操作起來似乎很簡單玲躯，其實很多人糾結的是，是在哪里打斷點跷车？（我們先看一個斷點截圖棘利，以chrome瀏覽器的斷點為例）

步驟記住沒？

用chrome瀏覽器打開頁面 → 按f12打開開發(fā)者工具 → 打開Sources → 打開你要調試的js代碼文件 → 在行號上單擊一下善玫，OK!恭喜你的處女斷點打上了,哈哈~~

2.斷點怎么打才合適？

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

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

我最先想到的是银舱，我點擊到底有沒有成功？點擊事件里的方法有沒有運行寻馏？好棋弥，要想知道這個問題的答案诚欠，我們立馬去打個斷點試試看，斷點打在哪粉寞？自己先琢磨一下。

接著上圖：

各位想到沒唧垦？沒錯液样，既然想知道點擊是否成功振亮，我們當然是在代碼中的點擊事件處添加一個斷點鞭莽，切記不要添加在226行哦，因為被執(zhí)行的是click方法內的函數(shù)撮抓，而不是226行的選擇器。斷點現(xiàn)在已經打上了，然后做什么呢荸恕？自己再琢磨琢磨~

繼續(xù)上圖：

然后我們當然是回去點擊加載更多按鈕啦，為什么融求？額。县昂。。如果你這么問倒彰，請允許我用這個表情

need-to-insert-img

莱睁，不點擊加載更多按鈕待讳，怎么去觸發(fā)點擊事件？不觸發(fā)點擊事件创淡，怎么去執(zhí)行點擊事件里的函數(shù)痴晦？咆哮狀。琳彩。不過我相信大家肯定不會問這么low的問題~不瞎扯了~

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

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

補充一下：

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

可能導致點擊事件沒生效的原因很多忽洛，比多選擇器錯誤，語法錯誤欲虚，被選擇的元素是后生成的等。怎么解決呢苍在？

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

語法錯誤，細心排查一下饰躲，不熟悉的語法可以百度對比一下

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

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

我們將目光投向事件內部，click事件觸發(fā)了删咱，那么接下來的問題就是它內部的函數(shù)問題了。如果你要問為什么痰滋？請給我一塊豆腐续崖。。袜刷。

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

接著我們分析下點擊事件里面的內容嘶是，里面包含三句話蛛碌，第一句話是變量i自增長，第二句話是給按鈕添加一個i標簽蔚携，第三句話是調用請求數(shù)據(jù)的方法。

就通過這三句話的本身作用跛十，我們可以將較大一部分嫌疑放在第三句話秕硝，一小部分放在第一句和第二句話上芥映，有人可能會疑惑远豺，第二句話怎么會有嫌疑呢？他的作用只不過是添加一個標簽惊来，對于數(shù)據(jù)完全沒有影響啊棺滞，確實，這句話對于數(shù)據(jù)沒有影響继准，但是出于嚴謹考慮，它仍然有可能出錯移必，例如它要是少了一個分號呢？或者句子內部某個符號錯誤呢秒赤？往往就是這種小問題浪費我們很多時間。

好入篮，為了進一步鎖定”犯罪嫌疑人“，給大家介紹一個工具甘晤，也是上圖出現(xiàn)兩個圖標之一饲做，見下圖：

這個小圖標的功能叫”逐語句執(zhí)行“或者叫”逐步執(zhí)行“，這是我個人理解的一個叫法盆均，意思就是，每點擊它一次游沿，js語句就會往后執(zhí)行一句肮砾，它還有一個快捷鍵，F(xiàn)10仗处。下圖示范一下它被點擊以后的效果：

我單擊了兩次這個按鈕（或者使用F10快捷鍵），js代碼從227行執(zhí)行到了229行吃环，所以我管它叫”逐語句執(zhí)行“或者”逐步執(zhí)行“洋幻。這個功能非常的實用，大部分的調試都會使用到它文留。

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

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

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

第一種：

操作步驟如下：

1.仍然是在227行打上斷點 → 2. 點擊加載更多按鈕 → 3. 單擊一次“逐語句執(zhí)行“按鈕粹胯，js代碼執(zhí)行到228行 → 4.用鼠標選中i++（什么叫選中大家里不理解卷中？就是你要復制一個東西，是不是要選中它蟆豫？對，就是這個選中） → 5. 選中以后栈幸，鼠標懸浮在目標上方帮辟，你就看到上圖的結果速址。

第二種：