Vue 项目 VSCode 调试

调试Vue搭建的前端项目

 

在项目根目录下的vue.config.js中添加:

1
2
3
4
5
6
7
8
9
10
module.exports = {
  lintOnSave: false, //关闭eslint语法校验<br> //填写这部分
  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文件下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "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

posted @   FeelRose  阅读(2135)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示