週五. 8 月 7th, 2020

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

Visual Studio Code debug Vue with breakpoints

1 min read
breakpoints-in-vs-code

Visual Studio Code debug Vue with breakpoints – 使用 VS code 對 Vue 除錯

 

在官方文件 Debugging in VS Code 中有說明如何在 Visual Studio Code 來對 Vue 作斷點除錯 ( Debug with breakpoints )

 

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

請確保你安裝了 VS Code 以及適合的流覽器,並且安裝啟動了最新版的相應的 Debugger 擴展:

  1. Debugger for Chrome
  2. Debugger for Firefox

vs-debug-chrome

vs-debug-firefox

 

因為是使用 Vue CLI 3,請設置並更新 vue.config.js 內的 devtool property:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue-template-primevue/' : '/',
  configureWebpack: {
    devtool: 'source-map'
  }
}

 

  • 設置從 VS Code Code 啟動除錯

我們這裡假設埠號為 8080。如果與實際情況不符 (比如 8080 埠已經被佔用且 Vue CLI 為你自動選取了另一個埠號),可以修改相應的配置。

launch.json

點擊在 Activity Bar 裡的 Debugger 圖示來到 Debug 視圖,然後點擊那個齒輪圖示來配置一個 launch.json 的檔,選擇 Chrome/FirefoxLaunch 環境。然後將生成的 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}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

 

  • 開始偵錯
  1. src/App.vue 的 line 29,36 的地方設置一個中斷點。
  1. 在根目錄打開你慣用的終端並使用 Vue CLI 開啟這個應用:npm run serve
  2. 來到 Debug 視圖,選擇“vuejschrome/firefox”配置,然後按F5 或點擊那個綠色的 play 按鈕。breakpoints
  3. 隨著一個新的流覽器實例打開http://localhost:8080,你的中斷點現在應該被命中了。debug-in-chrome

在 VS Code 中,滑鼠移動到變數上方, 也會顯示出它目前的值,真是很方便

breakpoints-in-vs-code

 

  • VS Code 除錯界面

參考: https://code.visualstudio.com/docs/editor/debugging

Copyright © All rights reserved. | Newsphere by AF themes.