【小技巧】移动端网页调试神器Eruda的使用技巧

作移动端Web开发的一大痛点就是，在真机运行下没法查看console.log日志和其余信息如网络请求、显示本地存储等信息。若是网页是运行在手机浏览器中还算好，能够把网址在电脑上打开查看console信息，可是若是是作APP的内嵌H5页面，那就只能靠开发阶段在浏览器模拟环境中尽可能没有Bug，可是，一旦H5上线后报错那就比较麻烦了，并且还依赖APP环境才能跑的网页，更加难以查找问题。若是让移动端也拥有相似Chrome DevTools工具那岂不是很愉快么？

vConsole即是这样一款很棒的移动端DevTools工具，由大厂企鹅出品。但本文把他定位为男二号，今天的主角男一号是：Eruda！vConsole的同类。若是你不知道怎么在移动端调试网页，那么本篇文章对你颇有帮助，若是你是vConsole的用户，那么你也可尝试一下Eruda，若是你是移动端网页开发骨灰级玩家，那么能够选择低调的忽略本文。

Eruda是谁？

你们好，给你们介绍一下，这是个人.....。Eruda 是一个专为手机网页前端设计的调试面板，相似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。

GitHub地址为：https://github.com/liriliri/eruda，颜值和技能都很棒的Erdua：

详细介绍能够戳这里产看，我就不赘述了

使用技巧

这才是本文重点。Eruda的基本使用方法推荐使用CDN和可配置参数的形式，在页面引入以下代码：

;(function () {
    var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') !== 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

eruda.init();里面能够传入要初始化哪些面板，默认加载全部。

这样使用方式没有错，可是若是Eruda要跟着发布到线上的话，那咱们要删除这段代码？由于这样会无论你需不须要调试Eruda都会当即加载，在页面出现Eruda的图标。个人目标是，Eruda能够保留在页面里，不管什么环境，只要咱们想呼唤它出现的时候它才出现，不须要它的时候它只是一段不会生效的普通代码。

我想到的办法是：首先把上述引入代码的src放到if里，同时把localStorage改成sessionStorage，active-eruda参数也能够改个更短的名字，改后的代码以下：

;(function () {
    if (!/eruda=true/.test(window.location) || sessionStorage.getItem('eruda') !== 'true') return;
    var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

这段代码的意思是若是URL中有参数eruda=true或者sessionStorage中eruda的值为true才加载Eruda。这样的好处是，咱们须要调试的时候能够在网页URL后面加个参数便可，不须要调试的它不会加载。

然而，这在开发阶段能够这样作比较好，可是在线上环境可能要加URL参数比较麻烦。因而我想到了在页面中点击某个元素10次再加载Eruda，点击10次或者更屡次，而后在sessionStorage中写入eruda=true，而后刷新当前页。相反，再点击10次关闭Eruda。用这样比较隐藏的方式开启或关闭Eruda，这样线上环境也能够自由开启或关闭Eruda了。

例子：假若有这样的一个页面，里有一个标题文字

<h2>——规则详情——</h2>
<div>
.....
</div>

那么咱们能够在h2标签上绑定一个click事件，加入方法名叫showEruda

<h2 onclick="showEruda">——规则详情——</h2>
<div>
.....
</div>

<script>
var count = 0;
function showEruda () {
    if (count >= 10) {    
        var erdua = sessionStorage.getItem('erdua');
        if (!erdua || erdua === 'false'){
            sessionStorage.setItem('eruda', 'true')
        } else {
            sessionStorage.setItem('eruda', 'false')
        }
        location.reload()
    }
    count++
}
</script>

这样点击规则详情10次就能够唤起Eruda了，再点击10次就关闭Eruda，反正我以为这样挺好的。

不知道你们都是怎么用的呢？

全文完。

---

关注公众号，第一时间接收最新文章。若是对你有一点点帮助，能够点喜欢点赞点收藏，还能够小额打赏做者，以鼓励做者写出更多更好的文章。