vue debug 二種方法
console.log多了比較煩,用debug就比較清晰了。
可以快速履清代碼運行的先后順序,驗證自己的想法是否正確,可以清楚的了解到變量的內(nèi)容,不用在console.log了。
一,vue devtools
1,chrome應(yīng)用商店安裝vue devtools擴展,并打開vue devtolls擴展
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)有屬性的描述。 // 欲了解更多信息,請訪問: 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訪問網(wǎng)址就可以debug了
vscode debug vue
總結(jié)
以上所述是小編給大家介紹的vue debug 二種方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解
這篇文章主要為大家介紹了Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式
最近的項目完成后,在性能優(yōu)化階段需要做按鈕的防止重復(fù)點擊功能,本文主要介紹了vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式,具有一定的參考價值,感興趣的可以了解一下2023-08-08vue swipeCell滑動單元格(仿微信)的實現(xiàn)示例
這篇文章主要介紹了vue swipeCell滑動單元格(仿微信)的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09