前端除錯
解決bug通常要對程式碼進行除錯，這樣才能比較容易的找出關鍵性問題。掌握一個好的除錯技巧是一個開發人員必備的基本技能。
如何除錯
這裡我們拿一套iview-admin 的原始碼來進行除錯
1.肉眼除錯
所謂肉眼除錯就是指直接看程式碼進行除錯，這種方式效率非常低下。
2.console.log(...)
檢視console.log(...)打印出的日誌應該是目前大多數前端慣用的除錯方法。但是這種方式對於縷清程式執行的步驟和過程來說是比較困難的。
比如，我要檢視一個函式被呼叫的位置，這就比較難找出。檢視下面程式碼
我們需要找到 updateMenulist() 被呼叫了幾次，在哪被呼叫的。當然，被呼叫了幾次我們很容易檢視，只需要在函式內列印一下即可。
updateMenulist (state) {
console.log("我被呼叫了")
}
複製程式碼
瀏覽器控制檯中就會顯示出來
但是我們想知道它是在哪裡被呼叫的，這時我們會想到，直接在資料夾裡搜尋這個函式不就可以了嗎，如
搜尋到的結果是有4個地方呼叫了這個函式，但是控制檯裡只打印了兩次，而且如果我們想知道它的呼叫循序，這就很難辦啦。那麼接下來就請看下面的除錯方法。
3.斷點除錯
如果是使用webpack打包了需要將開啟map模式，否則斷點斷不到具體檔案。
瀏覽器中斷點
之前我們console.log()列印的時候，後面會出現列印的具體檔案位置。
點選之後會跳到這個檔案的具體位置。之後點選我箭頭所指的位置就斷點了
之後就可以按F5重新整理斷點除錯了，程式執行到這個地方會被卡住，然後你就可以檢視當前的環境中的一些資訊，如下
檢視呼叫棧
我們可以很明顯的檢視函式第一次是在main.js的34行呼叫的。
然後我們可以按下F11或者：
於是我們再次點選，就又跳到了第二次執行這個函式的地方。
程式碼中的斷點
有時候我們不想用console.log()去列印然後在瀏覽器中找到檔案設定斷點，那還有一種方法可以快速的實現斷點
debugger 關鍵之
在程式碼中直接使用 debugger 關鍵字可以快速的實現斷點。
效果和瀏覽器中的斷點效果是一樣的。
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除錯的比較多。
chrome 外掛除錯
首先，下載vscode 外掛
然後點選除錯按鈕
找到你的專案新增配置
如我的是MyApp，點選新增
然後會跳到一個檔案裡
將url改成你的專案開發環境除錯的地址， 然後 驅動專案 一般的啟動命令配置都是 npm run dev，具體的啟動命令自行檢視package.json檔案中。
啟動完成之後 按f5啟動 chorme除錯，這樣就可以在 vscode 中打斷點進行除錯了。