Vue 除錯-Chrome + VScode

彙整兩種除錯方法

📋 目錄

1. 說明
2. [方法一] Script 設定 dev
3. [方法二] VScode 設定斷點

說明

在開發的過程中，一定需要除錯，像是最基礎藉由 console.log() 去查看變數的值或變化。為了更詳細確認執行細節，此文整理了兩個在 Chrome 瀏覽器結合 VScode 編輯器除錯的方法。

[方法一] Script 設定 dev

step1 準備工作

先至 Github 上將專案 clone 至本地端。接著下：npm install & npm run serve ，把專案運行起來。

step2 在 package.json 新增 script

打開 package.json 中一個 script:

"dev": "node --inspect ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve"

step3 終端機下指令

在終端機正確的路徑下，輸入下方指令：

npm run dev

step4 設定 Chrome 斷點

打開 Chrome 視窗，輸入上一個指令產生的網址。開啟開發人員工具(按 F12) 可以看到 webpack:// 裡面有完整的檔案，可以設定斷點。

step5 開始除錯

設定好斷點，當執行到斷點該行時，會停在斷點位置，即可一行一行查看裡面的細節。

[方法二] VScode 設定斷點

step1 準備工作

先至 Github 上將專案 clone 至本地端。接著下：npm install & npm run serve ，把專案運行起來。

step2 新增 launch.json

從 VScode 去點 Debug 啟動 launch.json。

step3 launch.json 配置好設定

至官網複製相對應的設定，內容如下。

{
  "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}/*"
       }
     }
   ]
 }

這邊要特別注意 port 的數字，要和前面 npm run serve 跑起來的數字一樣。

step4 設定 Chrome 斷點

點下 Debug 按鍵，會自動打開 Chrome 視窗，開啟開發人員工具(按 F12) 可以看到 webpack:// 裡面有完整的檔案，可以設定斷點。

step5 開始除錯

設定好斷點，當執行到斷點該行時，會停在 VScode，即可一行一行查看裡面的細節。

🐛 Oh!Insecticide!