vue debug 二種方法
更新時間：2018年09月16日 09:29:14 作者：張映
這篇文章主要介紹了vue debug 二種方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
console.log多了比較煩，用debug就比較清晰了。
可以快速履清代碼運行的先后順序，驗證自己的想法是否正確，可以清楚的了解到變量的內(nèi)容，不用在console.log了。
一，vue devtools
1，chrome應用商店安裝vue devtools擴展，并打開vue devtolls擴展
2，啟動vue，npm run dev
3，chrome中訪問vue網(wǎng)址，打開開發(fā)者工具，導行會多出vue，如下圖
vue devtools
vue devtools，對于數(shù)據(jù)展示，是非常清楚的。
二，vscode debug
1，修改.vscode/launch.json
查看復制打印?
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現(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 二種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
本文將深入探討 Vue 組件樣式作用域的常見問題,并提供多種解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
vue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享
今天小編就為大家?guī)硪黄獀ue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
在現(xiàn)代的Web應用中,用戶體驗至關重要,而提供簡單易用的復制功能是改善用戶體驗的一項關鍵功能,本文將為大家詳細介紹Vue實現(xiàn)一鍵復制功能的具體方法,需要的可以參考下2023-11-11
本篇文章主要介紹了在vue中使用jointjs的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
詳解Vue ElementUI手動上傳excel文件到服務器
這篇文章主要介紹了詳解Vue ElementUI手動上傳excel文件到服務器，對ElementUI感興趣的同學，可以參考下2021-05-05
這篇文章主要給大家介紹了vant樣式不生效問題的解決辦法,文中通過示例代碼介紹的非常詳細,對大家學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue3項目中封裝axios的示例代碼,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了如何在Vue項目中使用flv.js播放視頻,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
這篇文章主要介紹了解決找不到模塊“xxx.vue”或其相應的類型聲明問題，具有很好的參考價值，希望對大家有所幫助。2022-10-10