vscode前端調試技巧

1.調試vue打包過程需在launch.json設定以下調試配置

{
   "type": "node",
   "request": "launch",
   "name": "Launch Program",
   "program": "${workspaceFolder}/node_modules/.../vue-cli-service.js",// 啓動入口
   "args": ["inspect","--mode","production"] // 參數
 }

2.調試vue打包後的代碼

(1) 在vue.config.js中設置source-map爲代碼打包方式，這樣調試的時候代碼纔跟源碼差很少，以後再在相關的地方插入debugger;就能夠在瀏覽器上調試了【調試插件：Vue Devtools】。

module.exports = {
  configureWebpack: config => {
    config.devtool = "source-map";
  },
  lintOnSave: true 
}

（2）若是想在vscode上調試，則須要安裝Debugger for Chrome插件，而後在launch.json設定以下調試配置

{
    "type": "chrome",
    "request": "launch",
    "name": "vue-chrome",
    "url": "http://localhost:8080", //npm run 運行的地址
    "webRoot": "${workspaceFolder}/src",
    "breakOnLoad": true,
    "sourceMapPathOverrides": { // 將生成後的文件路徑[看瀏覽器資源]映射須要調試的代碼位置
      "webpack:///src/*": "${webRoot}/*",
      "webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*",
    }
}

（3）若是須要調試第三方的插件，則須要使用第三方的開發包，在package.json中的main等就是第三方的應用標誌

欲瞭解更多信息，請訪問官網教程 https://go.microsoft.com/fwli...