脚本宝典收集整理的这篇文章主要介绍了vue + webpack +chrome 调试,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue 经过webpack的打包压缩之后,通过source看到的代码已经面目全非,无法轻易对代码进行调试。最近整理一下针对vue的调试方法。
devtools是Chrome的调试vue的插件,可以直接显示VUE组件现在的状态。
安装方法是在Chrome浏览器的扩展插件仓库里搜vue devtool,安装Vue.js devtools后结合下面这张官方动图,
139062-20180515165823688-1885930023 (1).gif
139062-20180515165823688-1885930023.gif
devtools 只能调试开发环境的代码,正式环境没办法调试
关于webpack的sourcemap一共有7中配置,sourcemap 是指模块引入方式和源文件对应关系,不同的配置会影响打包的速度,和是否能追寻到源代码。
webpack 不仅支持这 7 种,而且它们还是可以任意组合的,就如文档所说,你可以设置 souremap 选项为 cheap-module-inline-source-map。
经过测试只要包含source-map,都能找到debug的源文件,只有eval环境下是转译之后的文件。
关于debuger webstrom的debug标记是不起作用的 需要手动加入debuger命令
@H_777_53@ created() {
debugger
this.eventBus = bus;
console.LOG(this.eventBus);
}
以上是脚本宝典为你收集整理的vue + webpack +chrome 调试全部内容,希望文章能够帮你解决vue + webpack +chrome 调试所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。