前端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.輸出