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...