淺析Visual Studio Code斷點調(diào)試Vue

更新時間：2018年02月27日 14:49:37 投稿：laozhang

本篇文章給大家總結了Visual Studio Code斷點調(diào)試Vue的方法以及心得分享，需要的朋友參考學習下。

很多人習慣在 Chrome 的調(diào)試窗口中調(diào)試 Vue 代碼，或者直接使用 console.log 來觀察變量值，這是非常痛苦的一件事，需要同時打開至少 3 個窗體。個人還是更加習慣于斷點調(diào)試。這篇文章將介紹如何配置 Visual Studio Code 和 Chrome 來完成直接在 VS Code 斷點調(diào)試代碼, 并且在VS Code的調(diào)試窗口看到Chrome中console相同的值。

設置 Chrome 遠程調(diào)試端口

首先我們需要在遠程調(diào)試打開的狀態(tài)下啟動 Chrome, 這樣 VS Code 才能 attach 到 Chrome 上:

Windows

右鍵點擊 Chrome 的快捷方式圖標，選擇屬性
在目標一欄，最后加上--remote-debugging-port=9222 注意要用空格隔開

macOS

打開控制臺執(zhí)行：

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

Linux

打開控制臺執(zhí)行：

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

Visual Stuido Code 安裝插件

點擊 Visual Studio Code 左側(cè)邊欄的擴展按鈕，然后在搜索框輸入Debugger for Chrome并安裝插件，再輸入，安裝完成后點擊 reload 重啟 VS Code

添加 Visual Studio Code 配置

點擊 Visual Studio Code 左側(cè)邊欄的調(diào)試按鈕，在彈出的調(diào)試配置窗口中點擊設置小齒輪，然后選擇 chrome, VS Code 將會在工作區(qū)根目錄生成.vscode 目錄，里面會有一個 lanch.json 文件并會自動打開
用下面的配置文件覆蓋自動生成的 lanch.json 文件內(nèi)容。

{
 // 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 節(jié)點下的 devtool 值改為 'eval-source-map'
將dev節(jié)點下的 cacheBusting 值改為 false

開始調(diào)試吧

一切具備了，現(xiàn)在驗收成果了

通過第一步的方式以遠程調(diào)試打開的方式打開 Chrome
在 vue 項目中執(zhí)行npm run dev以調(diào)試方式啟動項目
點擊 VS Code 左側(cè)邊欄的調(diào)試按鈕，選擇 Attach to Chrome 并點擊綠色開始按鈕，正常情況下就會出現(xiàn)調(diào)試控制條。
現(xiàn)在就可以在.vue文件的js代碼中打斷點進行調(diào)試了。

您可能感興趣的文章: