如何在vscode中除錯vue-cli專案?
阿新 • • 發佈:2019-01-14
一:參考官網文件,寫的還是很清楚的:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
二:需要安裝的東西和初始專案
2.1 用vue-cli初始化一個vue專案,我這裡專案名就叫vue,這裡不介紹,不是這個要講的。問度娘吧。
2.2 用vscode開啟這個專案,修改 專案 vue/build/config/index.js 裡面的 dev 裡面的 devtool: 'cheap-module-eval-source-map' 為 devtool: 'source-map' ,讓在編譯的時候生成.map檔案,能對應找到原始碼位置。
module.exports = { dev: { .......... // https://webpack.js.org/configuration/devtool/#development // devtool: 'cheap-module-eval-source-map', // 原來的 devtool: 'source-map', // 為了能在vscode上面除錯改的 ................... }View Code
2.3 安裝 Debugger for Chrome
2.4 點選左邊的除錯的設定,去修改launch.json檔案
三:修改launch.json檔案:
{ // 使用 IntelliSense 瞭解相關屬性。 // 懸停以檢視現有屬性的描述。 // 欲瞭解更多資訊,請訪問: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome","request": "launch", "name": "Launch Chrome against localhost", "url": "http://10.202.2.112:8081", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }