这里介绍一下我调试生产环境的方法。
直接连接生产环境接口
我最常用的方法就是这个了。在vue.config.js中把proxy中的target改成生产环境的地址,然后用生产环境帐号登录,这样就能完全模拟生产环境了。我想这个应该是大部分人常用的方式。
直接查看生产环境网页上的vue实例的状态
这种方法算不上是调试,只能查看一下vue实例的内部状态,以此来作出一些判断。具体做法是利用了vue把实例对象帮到了dom上的__vue__字段上。实施起来也是很简单的,找到vue实例对应的dom元素,在上面添加一个id,比如是id=“xxx”,我已经习惯了这种命名。然后在控制台中输入xxx.__vue__就能看到这个vue实例的内部状态了。可以放开你的想象力了做一些事情:)
这个方法是我比较懒时,不想启动项目,或者在用户现场调查问题时。
使用chrome的override
这个算是一个调试的利器了,在没有源码的情况下我喜欢用这个方法,或者在发布比较困难的情况下。我会先配置override,然后在chrome中修改js,保存,刷新页面,查看效果。因为都是编译后的代码,虽然chrome提供了格式化的功能,但是要定位代码和看懂代码还是要发挥自己的主观能动性的。
在生产上使用vue dev tools
如果在打包时直接把devtools设置成true,这样就能直接用了。如果不打开的话,通过vue dev tools暴露在window上的属性也能开启vue dev tools,但是却不能展示vue组件树,我怀疑是因为开启vue dev tools的时机问题,这个我没有再深入下去了,后面有机会再详细看一下vue dev tools的源码,再来补充
以上如果帮助到你了,请点赞哈:)