斷點調試其實并不是多麼複雜的一件事，簡單的了解無外呼就是打開浏覽器，打開sources找到js檔案，在行号上點一下罷了。操作起來似乎很簡單，其實很多人糾結的是，是在哪裡打斷點？（我們先看一個斷點截圖，以chrome浏覽器的斷點為例）
步驟記住沒？
火狐浏覽器:
打斷點操作很簡單，核心的問題在于，斷點怎麼打才能夠排查出代碼的問題所在呢？下面我繼續舉個例子友善大家了解，廢話不多說，上圖：
假設我們現在正在實作一個加載更多的功能，如上圖，但是現在加載更多功能出現了問題，點選以後資料沒有加載出來，這時候我們第一時間想到的應該是啥？（換一行寫答案，大家可以看看自己的第一反應是啥）
我最先想到的是，我點選到底有沒有成功？點選事件裡的方法有沒有運作？好，要想知道這個問題的答案，我們立馬去打個斷點試試看，斷點打在哪？自己先琢磨一下。
接着上圖：
各位想到沒？沒錯，既然想知道點選是否成功，我們當然是在代碼中的點選事件處添加一個斷點，切記不要添加在226行哦，因為被執行的是click方法内的函數，而不是226行的選擇器。斷點現在已經打上了，然後做什麼呢？自己再琢磨琢磨~
繼續上圖：
然後我們當然是回去點選加載更多按鈕啦，為什麼？額。。。如果你這麼問，請允許我用這個表情
，不點選加載更多按鈕，怎麼去觸發點選事件？不觸發點選事件，怎麼去執行點選事件裡的函數？咆哮狀。。不過我相信大家肯定不會問這麼low的問題~不瞎扯了~
繼續正題，上面的圖就是點選加載更多按鈕後的情況，我們可以看到左側的頁面被一個半透明的層給蓋住了，頁面上方還有一串英文和兩個按鈕，右側代碼227行被添加上了背景色，出現這個情況，先不管那些按鈕英文是啥意思有啥作用，你從這個圖得到了什麼資訊？繼續琢磨琢磨~
如果出現了上圖這個情況，說明一點，click事件中的函數被調用了，進一步說明了點選事件生效。那麼我們對于這個問題産生的第一個“犯罪嫌疑人”就被排除了。
如果沒有出現上面的情況咋辦？那是不是說明點選事件沒有生效呢？那是什麼導緻點選事件沒有生效？大家自己思考思考~
可能導緻點選事件沒生效的原因很多，比多選擇器錯誤，文法錯誤，被選擇的元素是後生成的等。怎麼解決呢？
選擇器錯誤，大家可以繼續往後看到console部分的内容，我想大家就知道怎麼處理了
文法錯誤，細心排查一下，不熟悉的文法可以百度對比一下
被選擇的元素是後生成的，最簡單的處理就是使用.on()方法去處理，這個東東帶有事件委托處理，詳情可以自行百度。
我們将目光投向事件内部，click事件觸發了，那麼接下來的問題就是它内部的函數問題了。如果你要問為什麼？請給我一塊豆腐。。。
打個比方，給你一支筆，讓你寫字，然後你在紙上寫了一個字，發現字沒出來，為啥？你說我寫了呀，紙上都還有劃痕。那是不是可能筆沒有墨水或者筆尖壞了了？這個例子和點選加載更多一個道理，寫字這個動作就是點選操作，而内部函數就是墨水或者筆尖。明白了不~
接着我們分析下點選事件裡面的内容，裡面包含三句話，第一句話是變量i自增長，第二句話是給按鈕添加一個i标簽，第三句話是調用請求資料的方法。
就 通過這三句話的本身作用，我們可以将較大一部分嫌疑放在第三句話，一小部分放在第一句和第二句話上，有人可能會疑惑，第二句話怎麼會有嫌疑呢？他的作用隻 不過是添加一個标簽，對于資料完全沒有影響啊，确實，這句話對于資料沒有影響，但是出于嚴謹考慮，它仍然有可能出錯，例如它要是少了一個分号呢？或者句子 内部某個符号錯誤呢？往往就是這種小問題浪費我們很多時間。
好，為了進一步鎖定”犯罪嫌疑人“，給大家介紹一個工具，也是上圖出現兩個圖示之一，見下圖：
這個小圖示的功能叫”逐語句執行“或者叫”逐漸執行“，這是我個人了解的一個叫法，意思就是，每點選它一次，js語句就會往後執行一句，它還有一個快捷鍵，F10。下圖示範一下它被點選以後的效果：
我單擊了兩次這個按鈕（或者使用F10快捷鍵），js代碼從227行執行到了229行，是以我管它叫”逐語句執行“或者”逐漸執行“。這個功能非常的實用，大部分的調試都會使用到它。
太晚了，明天繼續寫，好戲還在後頭~
——————————————————————分割線————————————————————
OK，接着寫！
上面介紹到我單擊了兩次“逐語句執行”按鈕，代碼從227行運作到229行，大家覺得這意味着啥？是不是說明從文法上來說，前兩句是沒有問題的，那麼是不是也同時意味着前兩句就排除嫌疑了呢？我看不然。
大 家都知道，加載更多就是一個下一頁的功能，而其中最核心的一個就是傳給背景的頁碼數值，每當我點選加載更多按鈕一次，頁碼的數值就要加1，是以如果下一頁 的資料沒出來，是不是有可能是因為頁碼數值也就是[i變量]（下面統一稱呼i）有問題？那麼如何排查頁碼是否存在問題呢？大家自己先思考思考。
下面教大家兩種檢視頁碼數值i]實際輸出值的方法，上圖：
第一種：
操作步驟如下：
1. 仍然是在227行打上斷點 → 2. 點選加載更多按鈕 → 3. 單擊一次“逐語句執行“按鈕，js代碼執行到228行 → 4.用滑鼠選中i++（什麼叫選中大家裡不了解？就是你要複制一個東西，是不是要選中它？對，就是這個選中） → 5. 選中以後，滑鼠懸浮在目标上方，你就看到上圖的結果。
第二種：
這個方法其實和第一種差不多，隻不過是在控制台輸出i的值，大家隻需要按照第一種方法執行到第三步 → 4. 打開和sources同一級欄目的console → 5. 在console下方的輸入欄裡輸入i → 6. 按enterEnter鍵即可。
上 面的第二種方法裡，提到了console這個東西，我們可以稱呼它為控制台或者其他什麼都可以，這不重要~console的功能很強大，在調試的過程中， 我們往往需要知道某些變量的值到底輸出了什麼，或者我們使用選擇器[$”.div”)這種]是否選中了我們想要的元素等，都可以在控制台列印出來。當然直 接用第一種方法也可以。
給大家示範一下在console裡列印我們想要選中的元素。上圖~
在控制台中輸入$(this)，即可得到選擇的元素，沒錯，正是我們所點選的對象——加載更多按鈕元素。
在 這裡給大家說說我對console這個控制台的了解：這個東東就是一個js解析器，是浏覽器本身用來解析運作js的家夥，隻不過浏覽器通過console 讓我們開發者在調試過程中，可以控制js的運作以及輸出。通過上面的兩種方法，大家可能覺得使用起來很簡單，但是我要給大家提醒一下，或者說是一些新手比 較容易遇到的困惑。
困惑一：在沒有打斷點的情況下，在console輸入i，結果console報錯了。
這 應該是新手很常見的問題，為什麼不打斷點我就沒有辦法在控制台直接輸出變量的值呢？個人了解這時候i隻是一個局部變量，如果不打上斷點，浏覽器會把所有的 js全部解析完成，console并不能通路到局部變量，隻能通路到全局變量，是以這時候console會報錯i未定義，但是當js打上斷點 時，console解析到了局部變量i所在的函數内，這時候i是能夠被通路的。
困惑二：為什麼我直接在console裡輸入$(“.xxx”)能列印出東西來呢？
很簡單，console本身就是一個js解析器，$(“.xxx”)就是一個js語句，是以自然console能夠解析這個語句然後輸出結果。
介紹完“逐語句執行”按鈕和console控制台的用法，最後再介紹一個按鈕，上圖：
這個按鈕我稱呼它為“逐過程執行”按鈕，和“逐語句執行”按鈕不同，“逐過程執行”按鈕常用在一個方法調用多個js檔案時，涉及到的js代碼比較長，則會使用到這個按鈕。
上圖：
假設上圖我隻在227行打了個斷點，然後一直點選逐語句執行”按鈕到229行，這時候如果再點選一次“逐語句執行”按鈕呢？則會進入下圖的js裡：
這些都是zepto庫檔案的内容，沒啥好看的，裡面運作很複雜，我們不可能一直使用“逐語句執行”按鈕，這樣你會發現你按了大半天還在庫檔案裡面繞。。。這時候咋辦？那就該“逐過程執行”按鈕上場了。
我除了在227行打了一個斷點，同時還在237行打了一個斷點，當我們運作到229行時，直接單擊“逐過程執行”按鈕，你會發現，js直接跳過了庫檔案，運作到了237行，大家可以自己使用體驗一下。
本文主要介紹了“逐語句執行”按鈕、“逐過程執行”按鈕、console控制台這三個工具，以及調試bug時的一些思路。工具的用法我就不再贅述了，大家知道用法就行，具體怎麼去更合理的使用，還需要大家通過大量的實踐去總結提升~
我 其實在本文主要想講的是調試bug的一個思路，但是由于選的例子涉及東西太多。。。怕全部寫下來内容太長，大家也沒興趣看，是以我就簡單的選了一部分給大 家講解，不知道大家有沒有收獲。别看我調試三句話寫了一堆的東西，如果真的在實際項目中你也像我這樣去做，估計你調試一個Bug的時間會比寫一個腳本的時 間還長很多。。。在實際情況下，我們應該養成拿到問題的第一時間，自行在腦海中排查問題，找到最有可能出現問題的點，如果沒辦法迅速的排查出最重要的點， 那麼你可以使用最麻煩但是很靠譜的方法，利用“逐語句執行”按鈕将整個和問題相關的js依次去執行一遍，在執行的過程中，自己也跟着理清思路，同時注意下 每個變量的值以及選擇器選中的元素是否正确，一般來說，這樣做一遍下來，bug都解決的差不多了。
【當你用心寫完每一篇部落格之後,你會發現它比你用代碼實作功能更有成就感!】