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代碼中打斷點進行調試了。

前往個人技術小站 https://www.bbwho.com 查看更多博客。