主要講三個東西：

• Vue.js devtools開發工具的使用

• 使用debugger和sourcemap除錯Vue元件

• vscode中除錯Vue元件

Vue.js devtools開發工具的使用

在Chrome或Firefox瀏覽器的擴充套件外掛倉庫裡搜vue devtool，安裝Vue.js devtools.

• 開啟vue專案,在控制檯選擇vue

      image

• 可操作元件檢視資訊變化

      image

使用debugger和sourcemap除錯Vue元件

針對vue-cli webpack官方腳手架，開啟build/webpack.dev.conf.js檔案，找到下面這句：

devtool: '#cheap-module-eval-source-map',
 

將其修改為：

devtool: '#eval-source-map ',

要修改的地方已經都改好了，就是這麼簡單，驚不驚喜，意不意外。

現在是具體除錯了。假設我們想除錯App.vue這個元件，可以在想要除錯的程式碼前新增debugger方法，如下圖所示：

  image

然後執行npm run dev，啟動服務後重新整理頁面（重新整理前先把瀏覽器開發者工具開啟），可以看到在程式進入App.vue元件mounted這個元件生命週期鉤子裡後，指定到debugger處時程式就被debug了。如下圖所示，剩下的大家應該都很熟悉了。可以看到，此處顯示的程式碼就是我們元件裡的實際程式碼，並非被我們編譯混淆後的那種程式碼，可讀性非常好。

  image

vscode中除錯Vue元件

先決條件

你必須安裝好 Chrome 和 VS Code。同時請確保自己在 VS Code 中安裝了 Debugger for Chrome 擴充套件的最新版本。

  image

請通過 Vue CLI，遵循它的 README 中的安裝文件安裝並建立一個專案。然後進入這個新建立的應用的目錄，開啟 VS Code。

從 VS Code 啟動應用

• 點選在 Activity Bar 裡的 Debugger 圖示來到 Debug 檢視，然後點選那個齒輪圖示來配置一個 launch.json 的檔案，選擇 Chrome 環境。然後將生成的 launch.json 的內容替換成為接下來的兩段配置：

  image

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

設定一個斷點

• 在 src/components/HelloWorld.vue 的 line90 的地方設定一個斷點，這裡的 data 函式返回一個字串。

      image

• 在根目錄開啟你慣用的終端並使用 Vue CLI 開啟這個應用：

npm start

• 來到 Debug 檢視，選擇 ‘vuejs: chrome’ 配置，然後按 F5 或點選那個綠色的 play 按鈕。

• 隨著一個新的 Chrome 例項開啟 http://localhost:8080，你的斷點現在應該被命中了。

    image