vue debug 二種方法
更新時(shí)間：2018年09月16日 09:29:14 作者：張映
這篇文章主要介紹了vue debug 二種方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
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 組件樣式作用域的常見問題,并提供多種解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
vue.js配合$.post從后臺(tái)獲取數(shù)據(jù)簡(jiǎn)單demo分享
今天小編就為大家?guī)?lái)一篇vue.js配合$.post從后臺(tái)獲取數(shù)據(jù)簡(jiǎn)單demo分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶體驗(yàn)至關(guān)重要,而提供簡(jiǎn)單易用的復(fù)制功能是改善用戶體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下2023-11-11
本篇文章主要介紹了在vue中使用jointjs的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
詳解Vue ElementUI手動(dòng)上傳excel文件到服務(wù)器
這篇文章主要介紹了詳解Vue ElementUI手動(dòng)上傳excel文件到服務(wù)器，對(duì)ElementUI感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要給大家介紹了vant樣式不生效問題的解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue3項(xiàng)目中封裝axios的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了如何在Vue項(xiàng)目中使用flv.js播放視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
解決找不到模塊“xxx.vue”或其相應(yīng)的類型聲明問題
這篇文章主要介紹了解決找不到模塊“xxx.vue”或其相應(yīng)的類型聲明問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-10-10