vue debug 二種方法

摘要： console.log多了比較煩，用debug就比較清晰了。 可以快速履清程式碼執行的先後順序，驗證自己的想法是否正確，可以清楚的瞭解到變數的內容，不用在console.log了。 一，vue devtools 1，chrome應用商店安裝vue devtools擴充套件，並開啟...

console.log多了比較煩，用debug就比較清晰了。

可以快速履清程式碼執行的先後順序，驗證自己的想法是否正確，可以清楚的瞭解到變數的內容，不用在console.log了。

一，vue devtools

1，chrome應用商店安裝vue devtools擴充套件，並開啟vue devtolls擴充套件

2，啟動vue，npm run dev

3，chrome中訪問vue網址，開啟開發者工具，導行會多出vue，如下圖

vue devtools，對於資料展示，是非常清楚的。

二，vscode debug

1，修改.vscode/launch.json

{
// 使用 IntelliSense 瞭解相關屬性。
// 懸停以檢視現有屬性的描述。
// 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"sourceMaps": true,
"name": "assa vue debug",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

2，啟動vue專案，npm run dev

3，點選vscode debug中的綠色三角啟動debug，chrome訪問網址就可以debug了