js斷點調試心得（以chrome瀏覽器爲例）

原文轉載自這裏js斷點調試心得,我是勤勞的搬運工，嗯！
這裏相對原文有刪減，想看原文的請移步。

一、斷點調試是啥？難不難？

用chrome瀏覽器打開頁面 → 按f12打開開發者工具 → 打開Sources → 打開你要調試的js代碼文件 → 在行號上單擊一下

二、斷點怎麼打才合適？

打斷點操做很簡單，核心的問題在於，斷點怎麼打纔可以排查出代碼的問題所在呢？下面我繼續舉個例子方便你們理解，廢話很少說，上圖：

假設咱們如今正在實現一個加載更多的功能，如上圖，可是如今加載更多功能出現了問題，點擊之後數據沒有加載出來，這時候咱們第一時間想到的應該是啥？（換一行寫答案，你們能夠看看本身的第一反應是啥）

我最早想到的是，我點擊到底有沒有成功？點擊事件裏的方法有沒有運行？好，要想知道這個問題的答案，咱們立馬去打個斷點試試看，斷點打在哪？本身先琢磨一下。

繼續上圖：

各位想到沒？沒錯，既然想知道點擊是否成功，咱們固然是在代碼中的點擊事件處添加一個斷點，切記不要添加在226行，由於被執行的是click方法內的函數，而不是226行的選擇器。斷點如今已經打上了，而後回去點擊加載更多按鈕，結果以下圖：

繼續正題，上面的圖就是點擊加載更多按鈕後的狀況，咱們能夠看到左側的頁面被一個半透明的層給蓋住了，頁面上方還有一串英文和兩個按鈕，右側代碼227行被添加上了背景色，出現這個狀況，先無論那些按鈕英文是啥意思有啥做用，你從這個圖獲得了什麼信息？繼續琢磨琢磨~

若是出現了上圖這個狀況，說明一點，click事件中的函數被調用了，進一步說明了點擊事件生效。那麼咱們對於這個問題產生的第一個「犯罪嫌疑人」就被排除了。

補充一下

若是沒有出現上面的狀況咋辦？那是否是說明點擊事件沒有生效呢？那是什麼致使點擊事件沒有生效？你們本身思考思考~
可能致使點擊事件沒生效的緣由不少，比多選擇器錯誤，語法錯誤，被選擇的元素是後生成的等。怎麼解決呢？
選擇器錯誤，你們能夠繼續日後看到console部分的內容，我想你們就知道怎麼處理了
語法錯誤，細心排查一下，不熟悉的語法能夠百度對比一下
被選擇的元素是後生成的，最簡單的處理就是使用.on()方法去處理，這個東東帶有事件委託處理，詳情能夠自行百度。

那麼接下來」犯罪嫌疑人「的身份鎖定在哪裏呢？
click事件觸發了，那麼接下來的問題就是它內部的函數問題了。接着咱們分析下點擊事件裏面的內容，裏面包含三句話，第一句話是變量i自增加，第二句話是給按鈕添加一個i標籤，第三句話是調用請求數據的方法。

就經過這三句話的自己做用，咱們能夠將較大一部分嫌疑放在第三句話，一小部分放在第一句和第二句話上，有人可能會疑惑，第二句話怎麼會有嫌疑呢？他的做用只不過是添加一個標籤，對於數據徹底沒有影響啊，確實，這句話對於數據沒有影響，可是出於嚴謹考慮，它仍然有可能出錯，例如它要是少了一個分號呢？或者句子內部某個符號錯誤呢？每每就是這種小問題浪費咱們不少時間。

好，爲了進一步鎖定」犯罪嫌疑人「，給你們介紹一個工具，也是上圖出現兩個圖標之一，見下圖：

這個小圖標的功能叫「逐語句執行」或者叫「逐步執行」，每點擊它一次，js語句就會日後執行一句，它還有一個快捷鍵，F10。下圖示範一下它被點擊之後的效果：

我單擊了兩次這個按鈕（或者使用F10快捷鍵），js代碼從227行執行到了229行。這個功能很是的實用，大部分的調試都會使用到它。

單擊了兩次「逐語句執行」按鈕，代碼從227行運行到229行，你們以爲這意味着啥？是否是說明從語法上來講，前兩句是沒有問題的，那麼是否是也同時意味着前兩句就排除嫌疑了呢？我看否則。

你們都知道，加載更多就是一個下一頁的功能，而其中最核心的一個就是傳給後臺的頁碼數值，每當我點擊加載更多按鈕一次，頁碼的數值就要加1，因此若是下一頁的數據沒出來，是否是有多是由於頁碼數值也就是[i變量]（下面統一稱呼i）有問題？那麼如何排查頁碼是否存在問題呢？你們本身先思考思考。

下面教你們兩種查看頁碼數值i]實際輸出值的方法，上圖：
方法一：1.仍然是在227行打上斷點 → 2. 點擊加載更多按鈕 → 3. 單擊一次「逐語句執行「按鈕，js代碼執行到228行 → 4.用鼠標選中i++ → 5. 選中之後，鼠標懸浮在目標上方，你就看到上圖的結果。

方法二：這個方法其實和第一種差很少，只不過是在控制檯輸出i的值，你們只須要按照第一種方法執行到第三步 → 4. 打開和sources同一級欄目的console → 5. 在console下方的輸入欄裏輸入i → 6. 按enter回車鍵便可。

上面的第二種方法裏，提到了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都解決的差很少了。

因此我的認爲，咱們調試bug的思路應該是這樣的：首先，js是否成功的執行進來；其次，js是否存在邏輯問題，變量問題，參數問題等等；最後，若是上述都沒有問題，請仔細查看各類符號。。。