前言
在做手机端项目的时候，我们经常在测试环境使用 vConsole 作为调试工具，它大概可以做这么多事情：
- 查看 console 日志
- 查看网络请求
- 查看页面 element 结构
- 查看 Cookies、localStorage 和 SessionStorage
- 手动执行 JS 命令
- 自定义插件
除了开发人员，vConsole 对于，测试人员也很有用，测试 bug 的时候，如果测试人员能拿到 console 信息和网络请求，无疑对于帮助开发快速定位问题是很有帮助的。
那问题来了，这么好用的工具，貌似大家都是在测试环境使用的，线上就没有引入，是不想让这个大大的调试按钮影响用户的使用体验么？这个理由显然站不住脚啊，谁能保证线上不出问题呢，如果线上可以用 vConsole，也许就能帮助我们快速定位问题，鉴于此，我给大家提供 2 种比较好的方式来解决这个问题。
速点触发
防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
这种方法的原理是利用了 函数防抖的概念，我们设置每次 600 ms 的间隔，在此间隔内的重复点击将计数总和，当达到 10或者10的倍数时，启用 vconsole 显示状态的改变；
若某次点击间隔超过 600 ms,则计数归零，从新开始；
实现代码如下：
import VConsole from "vconsole"; function handleVconsole() { new VConsole() let count = 0 let lastClickTime = 0 const VconsoleDom = document.getElementById("__vconsole") VconsoleDom.style.display = "none" window.addEventListener("click", function () { console.log(`连续点击数：${count}`) const nowTime = new Date().getTime() nowTime - lastClickTime < 600 ? count++ : (count = 0); lastClickTime = nowTime if (count > 0 && count % 10 === 0) { if (!VconsoleDom) return false const currentStatus = VconsoleDom.style.display VconsoleDom.style.display = currentStatus === "block" ? "none" : "block"; count = 0 } }); }
实际效果
使用摩斯密码
摩尔斯电码（英語：Morse code）是一种时通时断的信号代码，通过不同的排列顺序来表达不同的英文字母、数字和标点符号。是由美國發明家萨缪尔·摩尔斯及其助手艾爾菲德·維爾在1836年发明。--维基百科
第一种方法虽然好用，不过貌似太简单了，可能会误触，有没有一种可以通过 click 模拟实现的复杂指令呢？没错，我想到了摩斯密码； 简单来说，我们可以通过两种「符号」用来表示字符：点（·）和划（-），或叫「滴」（dit）和「嗒」（dah），下面是常见字符、数字、标点符号的摩斯密码公式标识：
假设，我们用 SOS 这个单词来表示 vconsole 启用的指令，那么通过查询其标识映射表，可以得出 SOS 的 摩斯密码表示为 ...---...，只要执行这个指令我么就改变 vconsole 按钮的显示状态就好了；那么问题又来了，怎么表示点（·）和划（-）呢，本来我想还是用点击间隔的长短来表示，比如 600ms 内属于短间隔，表示点（·）,600ms - 2000ms 内属于长间隔，表示划（-）；
但是实现后发现效果不太好，实际操作这个间隔不太好控制，容易输错; 后来我想到可以了双击 dblclick 事件，我们用 click 表示点（·），dblclick表示划（-），让我们实现下看看。
function handleVconsole() { new VConsole(); let sos = []; let lastClickTime = 0; let timeId; const VconsoleDom = document.getElementById("__vconsole"); VconsoleDom.style.display = "none"; window.addEventListener("click", function () { clearTimeout(timeId); const nowTime = new Date().getTime(); const interval = nowTime - lastClickTime; timeId = setTimeout(() => { console.log("click"); if (interval < 3000) { sos.push("."); } if (interval > 3000) { sos = []; lastClickTime = 0; } console.log(sos); lastClickTime = nowTime; if (sos.join("") === "...---...") { if (!VconsoleDom) return; const currentStatus = VconsoleDom.style.display; VconsoleDom.style.display = currentStatus === "block" ? "none" : "block"; sos = []; } }, 300); }); window.addEventListener("dblclick", function () { console.log("dbclick"); clearTimeout(timeId); const nowTime = new Date().getTime(); const interval = nowTime - lastClickTime; if (interval < 3000) { sos.push("-"); } if (interval > 3000) { sos = []; lastClickTime = 0; } console.log(sos); lastClickTime = nowTime; if (sos.join("") === "...---...") { if (!VconsoleDom) return; const currentStatus = VconsoleDom.style.display; VconsoleDom.style.display = currentStatus === "block" ? "none" : "block"; sos = []; } }); }
实际效果如下所示，感觉还不错，除了 SOS, 还可以用其他的单词或者数字什么的，这就大大增加了误触的难度，实现了完全的定制化。
总结
本文针对移动端线上调试问题，提出了 2 种解决方案，特别是通过摩斯密码这种方式，据我所知，实为首创，如果各位觉得有帮助和启发，请不要吝啬给个一件三连哦，这次一定～～～。
