欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端网页开发调试神器Eruda的介绍与使用技巧

程序员文章站 2022-09-08 15:39:45
前言 众所周知,我们在做移动端web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器...

前言

众所周知,我们在做移动端web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打开查看console信息,但是如果是做app的内嵌h5页面,那就只能靠开发阶段在浏览器模拟环境中尽量没有bug,但是,一旦h5上线后报错那就比较麻烦了,而且还依赖app环境才能跑的网页,更加难以查找问题。如果让移动端也拥有类似chrome devtools工具那岂不是很愉快么?

vconsole便是这样一款很棒的移动端devtools工具,由大厂企鹅出品。但本文把他定位为男二号,今天的主角男一号是:eruda!vconsole的同类。如果你不知道怎么在移动端调试网页,那么本篇文章对你很有帮助,如果你是vconsole的用户,那么你也可尝试一下eruda,如果你是移动端网页开发骨灰级玩家,那么可以选择低调的忽略本文。

eruda是谁?

大家好,给大家介绍一下,这是我的.....。eruda 是一个专为手机网页前端设计的调试面板,类似 devtools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获xhr请求、显示本地存储和 cookie 信息、浏览器特性检测等等。

github地址为: (),颜值和技能都很棒的erdua:

移动端网页开发调试神器Eruda的介绍与使用技巧

详细介绍可以戳这里产看,我就不赘述了

使用技巧

这才是本文重点。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,反正我觉得这样挺好的。

不知道大家都是怎么用的呢?

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。