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