針對一個剛上手的項目斷點調試是不能少的，之前對於vue項目一直使用的是devtools，昨天完成了通過vscode對vue項目的斷點調試今天記錄一下，
Chrome/Firefox同理所以只記錄一個；
准備：
官網調試講解網址：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
vscode 版本：版本: 1.50.1 (user setup)
需要插件：Debugger for Chrome
按照圖片步驟：
首先點擊 run 按鈕，然后會出現 2 處的設置按鈕，點擊設置按鈕之后會在項目文件加下生成一個 .vscode文件夾並且會產生一個launch.json文件，
點擊之后會自動在編輯其中打開，此時需要修改該啟動配置文件；這個時候我們打開我們准備好的 官網調試講解網址，按照里面的進行修改，內
容也不復雜，想偷懶的話直接將下面代碼粘貼上去即可；
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
然后開始調試，使用命令:npm run dev 然后點擊F5或者數字2前面的綠色小三角即可，然后就隨便造了！！！
注意事項：
上面的 url 端口號需要和你項目端口號一致，否則失敗；