溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue debug 二種方法

發(fā)布時(shí)間：2020-08-31 21:49:07 來源：腳本之家 閱讀：243 作者：張映 欄目：web開發(fā)

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 debug 二種方法 

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了

vue debug 二種方法 

vscode debug vue

總結(jié)

以上所述是小編給大家介紹的vue debug 二種方法，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手