斷點調試-程序員的必修課

斷點調試是做爲一個開發的基本功，本文有不完善的地方會持續改進!

1、源碼調試/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、打斷點的狀況調試

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.選中之後，鼠標懸浮在目標上方，你就看到上圖的結果。


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

3、不打斷點調試

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

4、總結

4.1 有無打斷點的區別

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

5、斷點調試實戰

小程序斷點調試實例（重點介紹--打斷點的思路）
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就已經爲真了，那麼

6、注意事項

本博客主要用於我的學習記錄，斷點調試章節部分參考文檔：http://www.javashuo.com/article/p-qhgytzep-dv.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;
好比這個例子中是點擊對應的背景顏色更改才觸發這個功能；

大四實習中，若是寫錯的地方請你們留言指出，萬分感謝。轉載請註明出處。