Visual Studio Code斷點偵錯Vue的方法分享

很多人習慣在 Chrome 的調試視窗中調試 Vue 程式碼， 或直接使用 console.log 來觀察變數值， 這是非常痛苦的一件事，需要同時開啟至少 3 個窗體。個人還是更習慣於斷點調試。這篇文章將介紹如何設定 Visual Studio Code 和 Chrome 來完成直接在 VS Code 斷點偵錯程式碼, 並且在VS Code的偵錯視窗看到Chrome中console相同的值。

設定Chrome 遠端偵錯連接埠

首先我們需要在遠端偵錯開啟的狀態下啟動Chrome, 這樣VS Code 才能attach 到Chrome 上:

Windows

• 右鍵點擊Chrome 的捷徑圖標，選擇屬性

• 在目標一欄，最後加上--remote-debugging-port=9222 注意要用空格隔開
  

macOS

開啟控制台執行：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

#Linux

開啟控制台執行：

##google-chrome --remote-debugging-port=9222

Visual Stuido Code 安裝外掛程式

點擊Visual Studio Code 左側邊欄的擴充按鈕， 然後在搜尋框輸入Debugger for Chrome並安裝插件，再輸入，安裝完成後點選reload 重啟VS Code

#新增Visual Studio Code 設定

• 點擊Visual Studio Code 左側邊欄的偵錯按鈕， 在彈出的偵錯組態視窗中點選設定小齒輪， 然後選擇chrome, VS Code 將會在工作區根目錄產生.vscode 目錄，裡面會有一個lanch.json 檔案並會自動開啟

• 用下面的設定檔覆蓋自動產生的lanch.json 檔案內容。

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
  {
   "type": "chrome",
   "request": "attach",
   "name": "Attach to Chrome",
   "port": 9222,
   "webRoot": "${workspaceRoot}/src",
   "url": "http://localhost:8080/#/",
   "sourceMaps": true,
   "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
   }
  }
 ]
}

修改webpack 的sourcemap

如果你是基於webpack 打包的vue 項目， 可能會存在斷點不匹配的問題, 還需要做些修改：

• 開啟根目錄下的config 目錄下的index.js 檔案

• 將dev 節點下的devtool 值改為'eval-source-map'

• 將dev節點下的cacheBusting 值改為false

  
  

開始調試吧

一切都具備了， 現在驗收成果了

• 透過第一步的方式以遠端偵錯開啟的方式開啟Chrome

• 在vue 專案中執行npm run dev以偵錯方式啟動專案

• 點擊VS Code 左側側邊欄的偵錯按鈕，選擇Attach to Chrome 並點選綠色開始按鈕，正常情況下就會出現偵錯控制條。

• 現在就可以在.vue檔案的js程式碼中打斷點進行偵錯了。

相關推薦：

#必看js斷點調試心得分享

Visual Studio Code對Node. js進行斷點偵錯使用詳解

php斷點偵錯的幾種方法討論

以上是Visual Studio Code斷點偵錯Vue的方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！