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，啟動(dòng)vue，npm run dev
3，chrome中訪問vue網(wǎng)址，打開開發(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問: 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ǎng)址就可以debug了
vscode debug vue
總結(jié)
以上所述是小編給大家介紹的vue debug 二種方法，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
Vue.js3.2的vnode部分優(yōu)化升級(jí)使用示例詳解
這篇文章主要為大家介紹了Vue.js3.2的vnode部分優(yōu)化升級(jí)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue 事件的$event參數(shù)=事件的值案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-01-01
詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue實(shí)現(xiàn)的組件兄弟間通信功能,結(jié)合實(shí)例形式分析了vue兄弟組件間通信的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
vue進(jìn)行post和get請(qǐng)求實(shí)例講解
這篇文章主要介紹了vue進(jìn)行post和get請(qǐng)求實(shí)例講解，違章圍繞post和get請(qǐng)求的相關(guān)資料展開詳細(xì)內(nèi)容，具有一的的參考價(jià)值，需要的小伙伴可以參考一下2022-03-03
本文主要介紹了vant4 封裝日期段選擇器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue uniapp 防止按鈕多次點(diǎn)擊的三種實(shí)現(xiàn)方式
最近的項(xiàng)目完成后,在性能優(yōu)化階段需要做按鈕的防止重復(fù)點(diǎn)擊功能,本文主要介紹了vue uniapp 防止按鈕多次點(diǎn)擊的三種實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
Vue實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個(gè)小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個(gè)可配置的、可拖動(dòng)的甘特圖。本文就將用它來實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下2022-11-11
vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例
這篇文章主要介紹了vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
在Vue中，過渡和動(dòng)畫是一種用于在組件之間添加平滑過渡效果和動(dòng)畫效果的高級(jí)用法，Vue提供了一些內(nèi)置的過渡和動(dòng)畫功能，同時(shí)也支持自定義過渡和動(dòng)畫效果，本文就給大家介紹一些Vue中過渡和動(dòng)畫的高級(jí)用法,需要的朋友可以參考下2023-06-06