您好,登錄后才能下訂單哦!
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 二種方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。