我是怎么调试vue生产环境的

这里介绍一下我调试生产环境的方法。

直接连接生产环境接口

我最常用的方法就是这个了。在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的源码，再来补充

以上如果帮助到你了，请点赞哈:)