移动端web调试神器 - Eruda

前言

我们在写webapp或者移动端网页需要嵌入到app时候，尤其是在APP内置的webView上加载我们的页面，想要查看手机浏览器信息是非常困难的事，当出现问题的时候，你又不能查看日志，一般会连接本地测试环境，然后在alert来打印日志（这种做法太蠢了），然后一遍一遍的定位bug，修改代码。使用eruda之后感觉爽爆了，解决了这个问题，这个工具就想电脑端的devtools，可以查看日志，网络，页面，Resources等

使用方法

方式一：多页面应用

在每个页面

方式二：动态加载

__DEBUG__ && loadJS('http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js', ()=>{
  eruda.init();
});

方式三：指定场景加载

//比如线上 给自己留一个后门，
//我们一般的做法是喜欢给某个不起眼的元素，添加一个点击事件，要点它十次、八次以后才开启 debug 模式；
;(function () {
    var src = 'http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('');
    document.write('eruda.init();');
})();

方式四：单页应用

npm install --save-dev eruda

;(function () {
    if (!/mdebug=true/.test(window.location.href)) return;
    var script = document.createElement('script')
    script.src = "https://cdn.bootcss.com/eruda/1.2.6/eruda.min.js"
    script.async = true
    document.getElementsByTagName('head')[0].appendChild(script)
    script.onload = function () {
        eruda.init()
    }
})()

我们在项目的入口引用这个文件就可以

我们只需要在地址栏增加mdebug=true即可，是不是很方便？

下面是脚手架项目中项目的示例：

文件 urlUtils.ts 中：

export default class UrlUtils {
  public static getQueryParam(paramName: string): string {
    return (
      (new RegExp(`[?|&]${paramName}=([^&;]+?)(&|#|;|$)`).exec(
        location.href
      ) || ["", ""])[1].replace(/\+/g, "%20") || ""
    );
  }

  public static getFileName(disposition: string): string {
    let fileName = "";
    if (disposition) {
      const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
      const matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) {
        fileName = matches[1].replace(/['"]/g, "");
      }
    }
    return fileName;
  }
  //更新url地址参数
  public static changeURLPar(url, params) {
    for(let key in params){
      let pattern = key + '=([^&]*)';
      let replaceText = key + '=' + params[key];
      if (url.match(pattern)) {
        let tmp = new RegExp(`${key}=[^&]*`);
        url = url.replace(tmp, replaceText);
      } else {
        if (url.match('[\?]')) {
          url = url + '&' + replaceText;
        } else {
          url = url + '?' + replaceText;
        }
      }
    }
    return url
  }
}

文件loadDevTools.ts中

import UrlUtils from "./urlUtils";

(function loadDevTools() {
  const showDevTools = UrlUtils.getQueryParam("sdt");
  const now = new Date().valueOf() / 1000;

  if (
    showDevTools.length === 10 &&
    Number(showDevTools) > now &&
    Number(showDevTools) < now + 3600
  ) {
    // 参数值为一小时内的时间戳才显示
    const erudaScript = document.createElement("script");
    erudaScript.src = "//cdn.jsdelivr.net/npm/eruda";
    document.body.appendChild(erudaScript);
    erudaScript.onload = () => {
      // @ts-ignore
      eruda.init();
    };
  }
})();

然后在 main.ts 中导入工具

import "./common/utils/loadDevTools";

参考资料：
GitHub - liriliri/eruda: Console for mobile browsers

点赞加关注，永远不迷路