论后门的重要性：
在与产品争论需求的过程中，我用鼠标在手机上面轻轻的点了几下，线上项目就启动超级模式，所有人都大惊失色，那一刻我的气势提升到了顶端，所有问题都不再是问题。。。
开个玩笑，我脑子里面冒出这个想法是做移动端项目的时候，Hybrid开发模式，很多问题可能在本地浏览器调试没有问题，但是到了平台内部，比如原生APP，小程序里面就可能出问题，这时候我们怎么才能
发现并解决问题呢，我们一般采用vconsole（https://www.qianduan.net/vconsole-open-source/）来定位问题，但是问题又来了，定位问题之后我们必须将原vconsole代码注释掉，然后再放到
测试服务器上，所以调试过程就变成了，开启vconsole代码并且打包放到测试服务器->注释vconsole代码并且打包放到测试服务器，来回打包放线上我觉得这个是纯粹的体力劳动啊，根本不符合我们程序员的
高贵气质，那不行，我得像个法子。
刚刚开始的想法是找某个不起眼的元素，连续点击10次，加载vconsole并加载，后来仔细想想，风险还是蛮高，而且操作的时候让别人看到了，别人也能学会超级模式了，那不行，我得想个法子。得有个类似与密码锁
的功能才行。这个时候，Array浮现在我的脑海里面。[0,1,2,3]不就是密码锁嘛，输入0,1,2,3就开锁了，那么怎么输入呢？array.push(0)不就是输入0嘛？怎么清空密码锁呢？直接array=[]不就行了嘛,解决方案
来了，那么下面贴代码(vue2.0框架):
data: function () {
return {
codeLock:[],//密码锁
}
},
//开启超级模式(生产线上必须屏蔽)
openSuperMode(){
let _this = this
if(_this.codeLock.toString() == [0,1,2,0,1,2,0,1,2].toString()){
dynamicLoadResources(2,'https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.2.0/vconsole.min.js',()=>{var vConsole = new VConsole()});
}
_this.codeLock = []
},
//输入密码
inputOpenCode(num){
let _this = this
_this.codeLock.push(num)
},
//动态加载方法
dynamicLoadResources(type,source,callback){
if(!source || source.length ===0){
throw new Error('dynamic load resources need resources');
};
var head = document.getElementsByTagName('head')[0];
if(type == 1){
var link = document.createElement('link');
link.href = source;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
}else if(type == 2){
var script = document.createElement('script');
script.src = source;
script.type = 'text/javascript';
head.appendChild(script);
script.onload = callback;
}
}
代码说明：
data里面的codeLock就是指代密码锁，我们要在页面上面找到4个元素，3个是密码输入元素，1个是开锁元素（其实2个，4个都可以，看你喜欢，最后匹配密码锁的密码更改一下就行）
在3个密码输入元素分别赋予点击事件@click="inputOpenCode(0)",@click="inputOpenCode(1)",@click="inputOpenCode(2)",在开锁元素上面赋予点击事件@click="openSuperMode"
然后输入密码，点击开锁即可开启！其实密码锁能做很多事情，开启调试模式只是其中一方面，但是建议正式生产环境不要放置，可能会留下比较明显的程序后门。