vscode配置使vue項目支持斷點調試

NO IMAGE

動機

每個應用,不論大小,都需要理解程序是如何運行失敗的。當我們寫的程序沒有按照自己寫的邏輯走的時候,我們就會逐步一一排查問題。在平常開發過程中我們可能會藉助console.log來排查,但是現在我們可以藉助vscode斷點來調試項目。

先決條件

  • 瀏覽器:Chrome
  • 編輯器:VS Code
  • vscode擴展插件:Debugger for Chrome
  • 項目搭建:Vue CLI 3

瀏覽器斷點調試

在可以從 Chrome 瀏覽器調試你的 Vue 組件之前,你需要更新 webpack 配置以構建 source map。做了這件事之後,我們的瀏覽器就有機會將一個被壓縮的文件中的代碼對應回其源文件相應的位置。這會確保你可以在一個應用中調試,即便你的資源已經被 webpack 優化過了也沒關係。

source map可以生成一個源代碼的映射文件.map文件,可以讓你打包壓縮的代碼指向回源代碼。

vue-cli3設置source map

使用vue-cli3搭建項目,在項目根目錄vue.config.js文件配置相對應的devtool,集體devtool配置詳情介紹可以參考我之前寫的webpack文章

//vue.config.js
module.exports = {
...
configureWebpack: {
devtool: 'source-map'
}
}

npm跑起項目後,在Chrome瀏覽器F12在控制檯就可以進行相對應的斷點調試了

vscode配置使vue項目支持斷點調試

注:devtool 設置成eval-cheap-module-source-map打包編譯速度會比source-map更快,所以建議在開發環境設置成eval-cheap-module-source-map,生成環境設置成cheap-module-source-map,更多配置可以查看webpack文檔

vscode斷點調試

* 步驟一:安裝Debugger for Chrome插件

vscode配置使vue項目支持斷點調試

* 步驟二:配置launch.json文件

vscode配置使vue項目支持斷點調試
vscode配置使vue項目支持斷點調試
vscode配置使vue項目支持斷點調試

**注意:**url參數配置要和vue.config.jsdevServer保持一致

//launch.json
{
// 使用 IntelliSense 瞭解相關屬性。 
// 懸停以查看現有屬性的描述。
// 欲瞭解更多信息,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome", //調試的環境
"request": "launch", //調試模式:啟動類型
"name": "erp_admin_break", // 自定義調試名稱
"url": "http://localhost:3000", //調試的服務地址,需要和devServer對應
"webRoot": "${workspaceFolder}/src", //調試的根路徑為src業務目錄下
"breakOnLoad": true,
"sourceMapPathOverrides": { //指定生成的sourceMap路徑,參考瀏覽器生成的 .目錄和src目錄
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*"
}
}
]
}

Vscode 調試Debugging參數詳情說明可以參考官方文檔

斷點調試項目

啟動項目 npm run serve,F5打開調試,

vscode配置使vue項目支持斷點調試

同時可以藉助vscode調試控制檯來查看console.log

vscode配置使vue項目支持斷點調試

感謝支持

因為很多小夥伴想看這個斷點配置,就寫了配置手冊。如有出錯之處,望指點😄一起學習。再次感謝各位的閱讀!路過的可以關注一波給個贊♥♥♥

相關文章

如何寫出讓同事膜拜的漂亮代碼?

6本Python好書上新,來撩~

入行AI,程序員為什麼要學習NLP?

不懂Webpack4的前端不是好工程師(基礎篇)