Visual Studio Code斷點調試Vue的示例分析

這篇文章將為大家詳細講解有關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代碼中打斷點進行調試了。

關于“Visual Studio Code斷點調試Vue的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。