1.設定 Chrome 遠端除錯埠

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

Windows系統下：

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

2.Visual Stuido Code 安裝外掛：

搜尋Debugger for Chrome並安裝外掛，安裝完成後點選 reload 重啟 VS Code

3.新增 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}/*"
        }
        }
    ]
}
 

4.修改 webpack 的 sourcemap

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

• 開啟根目錄下的 config 目錄下的 index.js 檔案
• 將dev 節點下的 devtool 值改為 'eval-source-map'
• 將dev節點下的 cacheBusting 值改為 false

5.開始除錯吧

• 執行npm run dev後，開啟Chrome 連線訪問專案
• 在VS Code中點選Attach to Chrome啟動除錯，設定除錯斷點即可進行除錯