斷點除錯-程式設計師的必修課

斷點除錯是作為一個開發的基本功，本文有不完善的地方會持續改進!

一、原始碼除錯/debugger方法

1.1控制檯除錯按鈕介紹

Resume script execution恢復斷點除錯、常用在一個方法呼叫多個js檔案（適用冗長js程式碼使用）、點選這個會直接跳轉到下一個斷點（逐過程執行）
Pause script execution停止斷點除錯
step over next function call逐語句執行，每點選它一次，js語句就會往後執行一句，快捷鍵-F10
step into next function call進入函式內部、單步執行下一個函式呼叫
step out of current function call跳出當前函式呼叫

Step快捷F9
停用斷點Deactive breakpoints
暫停斷點Pause on exceptions
彩蛋：在控制檯中輸入$(this)，即可得到我們所點選的物件——載入更多按鈕元素。
注：進入jquery、vue這樣的檔案時，用加速跳出，同時注意到最好慢點點選。不然出來之後點快了容易跳過要進入的函式。跳出來之後應繼續使用進入函式按鈕跳進函式內部看資訊。

1.2 逐過程執行和逐語句執行區別詳解

假設上圖我只在227行打了個斷點，然後一直點選逐語句執行”按鈕到229行，這時如果再點選一次“逐語句執行”
則會進入下圖的js裡：

我們不可能一直使用“逐語句執行”按鈕，這樣你會發現你按了大半天還在庫檔案裡面繞，那就該用“逐過程執行”按鈕。

我除了在227行打了一個斷點，同時還在237行打了一個斷點，當我們執行到229行時，直接單擊“逐過程執行”按鈕， js直接跳過了庫檔案，執行到了237行。

二、打斷點的情況除錯

2.1操作方法

1.在谷歌瀏覽器中用Command+option+F開啟全域性搜尋，然後搜尋對應頁面/事件。
技巧：要看某個函式首先找到這個函式的入口，最好先找入口事件，從頁面最初渲染的函式進去才好一步步往下走。打斷點時在函式內部打，不要在外部打斷點！
初始化函式常為生成一個DOM...

全域性搜尋對應函式之後，直接點進去

2.在合適的地方打斷點後，即可重新整理頁面了。注意是 狀態下

3.1會自動跳到函式內部，然後通過 按鈕不斷按函式順序執行，每次執行函式之後都能看到相應函式的含義，直到函式執行結束。

3.2有時候重新整理無效，本質是斷點沒有觸發事件，那個事件可以是滑鼠移入移出點選或點選事件等，所有要在介面中進行對應操作就會跳入斷點除錯階段。當然也可能上一個函式有錯誤，導致程式不能執行到斷點位置。
4.執行到最底層時：執行欄顯示為灰色無法點選

2.2 斷點除錯過程的收益

1.具體看某個變數的係數就把滑鼠放在上面

2.可看每次過程執行之後對應的提示

2.3 斷點除錯案例

法一
1.在227行打上斷點
2.點選載入更多按鈕
3.單擊一次“逐語句執行“按鈕，js程式碼執行到228行
4.用滑鼠選中i++
5.選中以後，滑鼠懸浮在目標上方，你就看到上圖的結果。

法二、在控制檯輸出i的值
1.按照第一種方法執行到第三步
2.開啟和sources同一級欄目的console
3.在console下方的輸入欄裡輸入i
4.按enter回車鍵即可

三、不打斷點除錯

1.沒打斷點的情況下，點選入口函式，再點選 按鈕進入了函式內部。
2.通過 按鈕不斷按函式順序執行，每次執行函式之後都能看到相應函式的含義，直到函式執行結束。

四、總結

4.1 有無打斷點的區別

1.沒打斷點時在console輸入i，i只是一個區域性變數，瀏覽器會把所有的js全部解析完成，console並不能訪問到區域性變數，只能訪問到全域性變數，所以console會報錯i未定義。
2.當js打上斷點時，console解析到了區域性變數i所在的函式內，這時i能夠被訪問。

五、斷點除錯實戰

小程式斷點除錯例項（重點介紹--打斷點的思路）
1.首先看動態效果圖、發現一個規律：第一次點選的新聞詳情沒問題，控制檯正常輸出對應的index，但是點選的第二個卻會報錯
。VM207:1 Setting data field "collected" to undefined is invalid.
2.全域性搜尋找到collected相關的程式碼片段
3.通過打斷點找問題的方法很重要

4.分別在三處不同地點打斷點看效果
第一處：頁面初始化onLoad函式中(製作步驟效果、分析效果)

第二處：(製作步驟效果、分析效果)

進入除錯發現postCollected=undefined，這就是問題所在。

第三處：收藏按鈕函式中(製作步驟效果、分析效果)

4.分析問題：
postsCollected是一個快取陣列，其中每一個新聞的index資料在快取狀態中是獨立的
使用if(postsCollected)會導致第一次點選後快取裡面就被加入一個index的數值了，那麼點選另外一條新聞之前postsCollected就已經為真了，那麼

六、注意事項

本部落格主要用於個人學習記錄，斷點除錯章節部分參考文件：https://www.cnblogs.com/mqfblog/p/5397282.html
如有侵權請聯絡刪除！

Debugger實戰篇
Bug

復現Bug
配置介面，新增數值統計樣式，然後點選背景顏色更換。觀察DOM結構變化。

定位Bug對應的函式方法
1.問同事這個功能寫的對應頁面，頁面有功能註釋的話就搜尋這個功能的註釋，這裡通過搜尋“數值統計”找到了相應功能的函式。
2.沒人知道頁面的情況看這個頁面結構，通過每一步操作頁面結構的HTML變化來判斷這個功能的觸發引起了哪些頁面結構的變化，通過變化產生或固有的id和class在專案中全域性搜尋，看到相關函式功能就在這個函式內部debugger;
3.如果不在專案中全域性搜尋id和class，在開發者模式-Source-JS資料夾下的每一個JS檔案中找功能函式
4.debugger之後點選觸發這個介面上功能的位置，看debugger會不會跳進去，不能跳進去就在另外一個有可能的功能函式中debugger;
補充：實在沒有頭緒時在開發者模式-Source-JS資料夾下的每一個JS檔案中搜索相應函式做判斷，找到關鍵函式就在其內部打斷點，看是否有效果。
看程式碼在開發者模式中看會快很多，也方便做筆記。

注意：
debugger後點擊對應樣式，如果樣式在介面沒出來，就點選 為 復原介面樣式
在頁面中先點出對應面貌

再進入控制檯，點選對應debugger的功能位置就會跳入debugger;
比如這個例子中是點選對應的背景顏色更改才觸發這個功能；

轉載https://www.cnblogs.com/EdisonVan/p/10346720.html