一.為什麼需要除錯
解決bug通常要對程式碼進行除錯，這樣才能比較容易的找出關鍵性問題。掌握一個好的除錯技巧是一個開發人員必備的基本技能。
二.基本除錯（pc端）
這裡我們拿一套iview-admin 的原始碼來進行除錯
1.肉眼除錯
所謂肉眼除錯就是指直接看程式碼進行除錯，這種方式效率非常低下。
2.console
-
log(...)
檢視console.log(...)列印出的日誌應該是目前大多數前端慣用的除錯方法。但是這種方式對於縷清程式執行的步驟和過程來說是比較困難的。
比如，我要檢視一個函式被呼叫的位置，這就比較難找出。檢視下面程式碼
我們需要找到 updateMenulist() 被呼叫了幾次，在哪被呼叫的。當然，被呼叫了幾次我們很容易檢視，只需要在函式內列印一下即可。
updateMenulist (state) { console.log("我被呼叫了") } 複製程式碼瀏覽器控制檯中就會顯示出來
但是我們想知道它是在哪裡被呼叫的，這時我們會想到，直接在資料夾裡搜尋這個函式不就可以了嗎，如
搜尋到的結果是有4個地方呼叫了這個函式，但是控制檯裡只列印了兩次，那麼，繼續往下看。
-
trace(...)
這個console.trace()的概述是：向Web控制檯輸出一個堆疊跟蹤。意思就是列印當前執行位置到console.trace()的路徑資訊.使用console.trace()可以列印出詳細的呼叫堆疊：
3.斷點除錯
如果是使用webpack打包了需要將開啟map模式，否則斷點斷不到具體檔案。
-
瀏覽器中斷點
之前我們console.log()列印的時候，後面會出現列印的具體檔案位置。
點選之後會跳到這個檔案的具體位置。之後點選我箭頭所指的位置就斷點了
之後就可以按F5重新整理斷點除錯了，程式執行到這個地方會被卡住，然後你就可以檢視當前的環境中的一些資訊，如下
檢視呼叫棧
我們可以很明顯的檢視函式第一次是在main.js的34行呼叫的。
然後我們可以按下F11或者：
於是我們再次點選，就又跳到了第二次執行這個函式的地方。
-
程式碼中的斷點
有時候我們不想用console.log()去列印然後在瀏覽器中找到檔案設定斷點，那還有一種方法可以快速的實現斷點
使用 debugger 關鍵之
在程式碼中直接使用 debugger 關鍵字可以快速的實現斷點。
效果和瀏覽器中的斷點效果是一樣的。
4.vscode 除錯
使用vscode的朋友們可以很方便的在vscode上面進行除錯
-
配置launch.json
在專案根目錄配置.vscode資料夾。下有個launch.json檔案
檔案內容
{ // 使用 IntelliSense 瞭解相關屬性。 // 懸停以檢視現有屬性的描述。 // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "啟動程式", "program": "${workspaceFolder}/HT/javascript/test.js" } ] } 複製程式碼點選F5或者：
關於vscode 除錯的 查閱 go.microsoft.com/fwlink/?lin… 一般是進行服務端後臺開發的用vscode除錯的比較多。
5.chrome 外掛除錯
首先，下載vscode 外掛
然後點選除錯按鈕
找到你的專案新增配置
如我的是MyApp，點選新增
然後會跳到一個檔案裡
將url改成你的專案開發環境除錯的地址， 然後 驅動專案 一般的啟動命令配置都是 npm run dev，具體的啟動命令自行檢視package.json檔案中。
啟動完成之後 按f5啟動 chorme除錯，這樣就可以在 vscode 中打斷點進行除錯了。
6.vue devTools
vue devTools 使用chrome核心的瀏覽器可以下載vue devTools擴充來除錯vue單頁應用，這使得vue專案除錯起來非常的方面。
如我寫的一個後臺管理的vue頁面。啟動專案後。
然後按f12開啟開發者工具，找到我們工具欄中的vue選項。於是乎便能清晰的看到我們的vue元件。
二.DOM除錯
1.Event Listener Breakpoints(事件監聽器斷點)
當有事件被觸發的時候，事件監聽器會斷點到具體的事件位置。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="cli">測試點選</div>
</body>
<script>
var cli = document.querySelector("#cli");
cli.addEventListener("click", function(){
console.log("點選了")
})
</script>
</html>
複製程式碼在瀏覽器中開啟檔案，然後按f12找到sources選項卡，比如我要監聽點選事件。選擇mouse將click打上鉤。
然後我們測試點選事件。便可以發現事件被攔截了。
2.Dom breakpoints
- subtree modifications : 當子節點發生變化的時候發生斷點
- attribute modifications : 當屬性發生變法的時候觸發斷點
- node removal : 當元素被移除的時候發生斷點
此處我舉個node removal的例子
當我們點選測試點選的時候，會將一個DOM給刪除。於是會在刪除的程式碼中實現斷點
三.ajax請求除錯
1.XHR Breakpoints
注：此小結從別人文章中摘要。
這幾年前端開發發生了翻天覆地的變化，從當初的名不見經傳到如今的盛極一時，Ajax驅動Web富應用，移動WebApp單頁應用風生水起。這一切都離不開XMLHttpRequest物件，而“XHR Breakpoints”正是專為非同步而生的斷點除錯功能。
我們可以通過“XHR Breakpoints”右側的“+”號為非同步斷點新增斷點條件，當非同步請求觸發時的URL滿足此條件，JS邏輯則會自動產生斷點。演示動畫中並沒有演示到斷點位置，這是因為，演示使用的是jQuery封裝好的ajax方法，程式碼已經過壓縮，看不到什麼效果，而事實上XHR斷點的產生位置是”xhr.send()”語句。
XHR斷點的強大之處是可以自定義斷點規則，這就意味著我們可以針對某一批、某一個，乃至所有非同步請求進行斷點設定，非常強大。但是，似乎這個功能在日常開發中用得並不多，至少我用得不多。想想原因大概有兩點：其一，這型別的斷點除錯需求在日常業務中本身涉及不多；其二，現階段的前端開發大多基於JS框架進行，最基本的jQuery也已經對Ajax進行了良好封裝，極少有人自己封裝Ajax方法，而專案為了減少程式碼體積，通常選擇壓縮後的程式碼庫，使得XHR斷點跟蹤相對不那麼容易了。
四.效能除錯工具performance
使用Chrome DevTools的performance皮膚可以記錄和分析頁面在執行時的所有活動。
在火焰圖上看到的圈起來的三條虛線，分別是:
- 藍線代表 DOMContentLoaded 事件。
- 綠線代表首次繪製的時間。
- 紅線代表 load 事件。