設定 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 檔案內容。

?

修改 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程式碼中打斷點進行除錯了。

// {

// "version": "0.2.0",

// "configurations": [

// {

// "type": "chrome",

// "request": "launch",

// "name": "vuejs: chrome",

// "url": "http://localhost:8080",

// "webRoot": "${workspaceFolder}/src",

// "breakOnLoad": true,

// "sourceMapPathOverrides": {

// "webpack:///src/*": "${webRoot}/*"

// }

// },

// {

// "type": "firefox",

// "request": "launch",

// "name": "vuejs: firefox",

// "url": "http://localhost:8080",

// "webRoot": "${workspaceFolder}/src",

// "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }],

// "firefoxExecutable": ""

// }

// ]

// }

//附加chrome配置 {

// // 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}/*"

// }

// }

// ]

// }

{

//...

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "vuejs: chrome",

"url": "http://localhost:8080/#/",

"webRoot": "${workspaceFolder}/src",

"breakOnLoad": false,

"sourceMapPathOverrides": {

"webpack:///src/*": "${webRoot}/*"

}

}

]

}