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

可以快速履清代碼運行的先后順序，驗證自己的想法是否正確，可以清楚的了解到變量的內容，不用在console.log了。

一，vue devtools

1，chrome應用商店安裝vue devtools擴展，并打開vue devtolls擴展
2，啟動vue，npm run dev
3，chrome中訪問vue網址，打開開發者工具，導行會多出vue，如下圖

vue devtools

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了

vscode debug vue

總結

以上所述是小編給大家介紹的vue debug 二種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com