Vue 項目 VSCode 調試

調試Vue搭建的前端項目

 

在項目根目錄下的vue.config.js中添加：

module.exports = {
  lintOnSave: false, //關閉eslint語法校驗
　//填寫這部分
  configureWebpack: {
    devtool: 'source-map'
  }
  // devServer: {
  //   proxy: 'http://localhost:8080',
  //   public: '192.168.0.53:8080' // 本地ip
  // }
}

　

在babel.config.js中添加：

module.exports = {
  env: {
    //填寫這部分
    development: {
      sourceMaps: true,
      retainLines: true
    }
    //填寫這部分
  },
  presets: ["@vue/app"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};    

安裝Debugger for Chrome插件 在debug中添加配置：

vscode  launch.json文件下配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "meteor:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

　　點擊F5,下斷點就可以調試

VScode 調試php的方法可以參考https://blog.csdn.net/XinShun/article/details/94836391