斷點調試是作為一個開發的基本功，本文有不完善的地方會持續改進!
一、源碼調試/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;
比如這個例子中是點擊對應的背景顏色更改才觸發這個功能；
大四實習中，如果寫錯的地方請大家留言指出，萬分感謝。轉載請注明出處。