console.log多了比較煩，用debug就比較清晰了。

創(chuàng)新互聯(lián)公司專注于昌黎網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供昌黎營銷型網(wǎng)站建設(shè)，昌黎網(wǎng)站制作、昌黎網(wǎng)頁設(shè)計、昌黎網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造昌黎網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供昌黎網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

可以快速履清代碼運(yùn)行的先后順序，驗(yàn)證自己的想法是否正確，可以清楚的了解到變量的內(nèi)容，不用在console.log了。

一，vue devtools

1，chrome應(yīng)用商店安裝vue devtools擴(kuò)展，并打開vue devtolls擴(kuò)展
2，啟動vue，npm run dev
3，chrome中訪問vue網(wǎng)址，打開開發(fā)者工具，導(dǎo)行會多出vue，如下圖

vue devtools

vue devtools，對于數(shù)據(jù)展示，是非常清楚的。

二，vscode debug

1，修改.vscode/launch.json

查看復(fù)制打印?

{ 
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(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項(xiàng)目，npm run dev

3，點(diǎn)擊vscode debug中的綠色三角啟動debug，chrome訪問網(wǎng)址就可以debug了

vscode debug vue

總結(jié)

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