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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步