vue debug 二種方法

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

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

一，vue devtools

1，chrome應(yīng)用商店安裝vue devtools擴(kuò)展，并打開vue devtolls擴(kuò)展
2，啟動vue，npm run dev
3，chrome中訪問vue網(wǎng)址，打開開發(fā)者工具，導(dǎo)行會多出vue，如下圖

vue devtools

vue devtools，對于數(shù)據(jù)展示，是非常清楚的。

二，vscode debug

1，修改.vscode/launch.json

查看復(fù)制打印?

{ 
 // 使用 IntelliSense 了解相關(guān)屬性。 
 // 懸停以查看現(xiàn)有屬性的描述。 
 // 欲了解更多信息，請?jiān)L問: 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項(xiàng)目，npm run dev

3，點(diǎn)擊vscode debug中的綠色三角啟動debug，chrome訪問網(wǎng)址就可以debug了

vscode debug vue

總結(jié)

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

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