在 VS Code 和 Chrome 中除錯

你必須安裝好 chrome 和 vs code。同時請確保自己在 vs code 中安裝了 debugger for chrome 擴充套件的最新版本。

請通過 vue cli，遵循它的 readme 中的安裝文件安裝並建立乙個專案。然後進入這個新建立的應用的目錄，開啟 vs code。

在可以從 vs code 除錯你的 vue 元件之前，你需要更新 webpack 配置以構建 source map。做了這件事之後，我們的偵錯程式就有機會將乙個被壓縮的檔案中的**對應回其原始檔相應的位置。這會確保你可以在乙個應用中除錯，即便你的資源已經被 webpack 優化過了也沒關係。

開啟config/index.js並找到devtool屬性。將其更新為：

devtool: '

source-map

從 vs code 啟動應用如果使用 vue cli 3 你需要設定vue.config.js內的devtool屬性：

module.exports = 
}

點選在 activity bar 裡的 debugger 圖示來到 debug 檢視，然後點選那個齒輪圖示來配置乙個launch.json的檔案，選擇 chrome 環境。然後將生成的launch.json的內容替換成為接下來的兩段配置：

在根目錄開啟你慣用的終端並使用 vue cli 開啟這個應用：

npm start

來到 debug 檢視，選擇『vuejs: chrome』配置，然後按 f5 或點選那個綠色的 play 按鈕。

隨著乙個新的 chrome 例項開啟http://localhost:8080，你的斷點現在應該被命中了。