vue debug 二種方法
更新時間：2018年09月16日 09:29:14 作者：張映
這篇文章主要介紹了vue debug 二種方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
console.log多了比較煩，用debug就比較清晰了。
可以快速履清代碼運行的先后順序，驗證自己的想法是否正確，可以清楚的了解到變量的內容，不用在console.log了。
一，vue devtools
1，chrome應用商店安裝vue devtools擴展，并打開vue devtolls擴展
2，啟動vue，npm run dev
3，chrome中訪問vue網址，打開開發(fā)者工具，導行會多出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 二種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解
這篇文章主要為大家介紹了Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue 事件的$event參數=事件的值案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要介紹了三種方式解決vue中v-html元素中標簽樣式，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue實現的組件兄弟間通信功能,結合實例形式分析了vue兄弟組件間通信的原理與相關操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue進行post和get請求實例講解，違章圍繞post和get請求的相關資料展開詳細內容，具有一的的參考價值，需要的小伙伴可以參考一下2022-03-03
本文主要介紹了vant4 封裝日期段選擇器的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
最近的項目完成后,在性能優(yōu)化階段需要做按鈕的防止重復點擊功能,本文主要介紹了vue uniapp 防止按鈕多次點擊的三種實現方式,具有一定的參考價值,感興趣的可以了解一下2023-08-08
Ganttastic是一個小型的Vue.js組件，用于在Web應用程序上呈現一個可配置的、可拖動的甘特圖。本文就將用它來實現簡單可擴展的甘特圖，感興趣的可以嘗試一下2022-11-11
這篇文章主要介紹了vue swipeCell滑動單元格(仿微信)的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
在Vue中，過渡和動畫是一種用于在組件之間添加平滑過渡效果和動畫效果的高級用法，Vue提供了一些內置的過渡和動畫功能，同時也支持自定義過渡和動畫效果，本文就給大家介紹一些Vue中過渡和動畫的高級用法,需要的朋友可以參考下2023-06-06