前端VUE調試

1.使用 Vue devtools

 

 

 　　如圖，devtool可以實時編輯數據，並看到數據變化。注意以下幾點：

　　0.vue3要使用devtool的6.0以上版本的beta版。將該拓展程序安裝在谷歌瀏覽器中后，需要開啟開發者模式，並啟用該程序，最好打開允許訪問文件網址。

　　

 

 

 

　　1.通過“檢查”可以調用出，且只對用vue的頁面有效。

　　2.有的時候頁面數據變了，但是devtool中不變化，右上角刷新一下就可以了。

2.使用VS Code調試

　　這是最常用的方法。需要現在vs中安裝Debugger for Chrome插件。然后在vue,config.js中，設置以下：

module.exports = {
  //配置 頁面調試
  configureWebpack: {
    devtool: "source-map"
  }
}

　　然后在vs中設置調試配置：選擇創建launch.json文件

 

 

 　　選擇chrome的launch文件，填寫以下內容：

{
    // 使用 IntelliSense 了解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

　　然后就可以在終端運行程序：npm run serve，右擊頁面選擇“檢查”。

　　可以在“來源”這一欄中看到當前頁面的代碼，在webpack文件下找到每個頁面的代碼，可以進行調試。

　　可以在代碼行數那里點擊，添加斷點。右側可以監視變量，查看調用堆棧，查看監聽器。可以按F10，F11調試程序。

　　

 

 　　這樣，當觸發函數時，就可以進入斷點進行調試了。

3.輸出

　　公司里一開始用的調試方法，就是靠輸出語句console或alert，效率低，而且調試完后要去除輸出語句。