【创意】巧用摩斯密码作为调试工具的入口｜vConsole 在线上的2种使用方式-阿里云开发者社区

【创意】巧用摩斯密码作为调试工具的入口｜vConsole 在线上的2种使用方式

2023-06-26 103

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【创意】巧用摩斯密码作为调试工具的入口｜vConsole 在线上的2种使用方式

前言

在做手机端项目的时候，我们经常在测试环境使用 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 = [];
    }
  });
}