調試和測試的區別，聊聊調試的事兒

很多的前端入門新手包括我在內，剛開始都不怎么會使用調試工具，用的比較多的就是console了。

調試和測試的區別，bug可以說是程序猿的公敵了，所以沒有bug是不可能的，有bug也不是什么丟人的事，至少還知道問題在哪，那么接下來就應該debug啦，下面就讓我們從瀏覽器斷點調試、代碼斷點調試、編輯工具斷點調試幾個方面來聊聊調試的事兒。

瀏覽器斷點調試

1.如上圖所示，根據報錯的位置點進去，到了source，也就是下圖所示。

2.在代碼左側打斷點后，按F5刷新。

3.鼠標指針放到你要監聽的變量，觀察值。

代碼斷點調試

1. 在代碼里你想debug的地方寫debugger

var map = function(a, f) {var result = [];for(var i=0, len=a.length;i<len;i++) {debugger;if(i in a) result[i] = f.call(null, a[i], i, a);}return result;
}
復制代碼

2. 在瀏覽器中就可以自動跳到你打斷點的位置了。
3. 鼠標指針放到你要監聽的變量，觀察值。

編輯工具斷點調試

因為我使用的是vscode，所以這里以它為例。

1.安裝Debugger for Chrome

2. 然后按F5，出現這個框

選擇 Chrome

3.然后出現個配置的提示，和打開了launch.json這個文件

{"type": "chrome","request": "attach","name": "Attach to Chrome","port": 9222,"webRoot": "${workspaceFolder}"},{"type": "chrome","request": "launch","name": "Launch Chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}"},{"name": "使用本機 Chrome 調試","type": "chrome","request": "launch","file": "${workspaceRoot}/basic/map.html",//  "url": "http://mysite.com/index.html", //使用外部服務器時,請注釋掉 file, 改用 url, 并將 useBuildInServer 設置為 false "http://mysite.com/index.html"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑"sourceMaps": true,"webRoot": "${workspaceRoot}",//  "preLaunchTask":"build","userDataDir": "${tmpdir}","port": 5433}
復制代碼

4.更改調試方式

5.在項目的 js 處設置好斷點，按 F5，就可以進行斷點調試了。

總而言之，以后還是用第三種+console.log結合使用，開心地debug。