给手机页面（vue）留个调试后门吧
时间：2023-04-05 22:14:04
HTML5
我们在浏览器中开发vue页面的时候，因为浏览器有天然的调试支持，所以我们开发起来非常方便。但是现在我们已经进入了移动时代，对移动页面的需求越来越大。在开发手机页面的时候，我们一般都是在浏览器中完成开发，然后在手机端进行测试。如果测试有问题，我们还得回到浏览器中查找错误。甚至还有APP内嵌的页面，需要调试后重新发送。当然，还有更奇怪的现象。由于手机浏览器和Web浏览器的差异，经常会发现在Web浏览器上可以正常运行，但在手机上却不行。所以首先我们需要一个可以在手机端调试的插件。如果你还在一步步使用alert来定位移动端页面bug，不妨试试vConsole。vConsolevConsole是微信公众平台前端团队开发的一款web前端开发面板，可以用来显示控制台日志，方便开发调试。可以从vConsole.js下载地址下载需要的js。下载解压后，在dist文件夹中找到vconsole.min.js，添加到项目中：请注意，VConsole只是vConsole的原型，并不是实例化的对象。因此vConsole不会被插入到网页中，直到它被手动新实例化。安装vConsole后，您以为一切都结束了吗？还有一个很大的问题就是用户肯定是看不到我们的调试页面的，所以我们需要偷偷给我们的程序设置一个后门。动态引入代码这里有两个设计思路供参考：在程序某处设置后门。此代码在点击10次或长按10秒后自动引入。通过运行环境引入动态vConsole。即在测试阶段引入，但在生产环境中不会引入这段代码。设置后门在程序某处设置长按10秒自动引入代码。首先，长按10秒的效果需要3个事件的组合才能产生。@touchstart:开始长按@touchmove:长安时移动@touchend:结束长按绑定事件代码如下，标签上引入这三个事件：title
对应方法：handleTouchstart(){touchStart();},handleTouchmove(){touchMove();},handleTouchend(){touchEnd();}，touchStart、touchMove、touchEnd方法是从外部文件导入的，便于统一管理。当然，也可以直接在这个文件中实现。长按10秒首先，什么是长按10秒。touchstart开始计时10秒后，肯定不叫长按10秒，所以叫点击后10秒。长按10秒应该是连续10秒的手指触摸，期间不能触发touchmove和touchend事件。所以思路应该是touchstart开始计时，期间如果触发了touchmove和touchend事件，则重置定时器：lettimeOutEvent=null;exportconsttouchStart=()=>{timeOutEvent=setTimeout(function(){longPress();},10000);};exportconsttouchMove=()=>{clearTimeout(timeOutEvent);timeOutEvent=0;}exportconsttouchEnd=()=>{clearTimeout(timeOutEvent);}在longPress方法中动态导入vConsole:constlongPress=()=>{clearTimeout(timeOutEvent);//清除定时器timeOutEvent=0;//执行长按执行内容vConsoleLog()};constvConsoleLog=()=>{让mapScript=document.getElementById("vConsoleLog");如果（mapScript）{返回；}让script=document.createElement('script');script.id='vConsoleLog';script.type='文本/javascript';脚本.src='./console.js';document.body.appendChild(script);}这样，我们就在程序中植入了后门。需要调试时，只需按住10秒，vConsole就会出来。根据环境动态导入如果想更严谨，不想让用户随时看到调试按钮，可以根据环境（env）导入vConsole。转发点赞就是最大的鼓励
