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

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

一，vue devtools

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

vue devtools

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

二，vscode debug

1，修改.vscode/launch.json

查看復(fù)制打印?

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

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

vscode debug vue

總結(jié)

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

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