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


Posted in Javascript onOctober 30, 2017

前言

众所周知,我们在做移动端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的介绍与使用技巧

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

使用技巧

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

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

总结

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

Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
ES6 javascript的异步操作实例详解
Oct 30 #Javascript
React Native 搭建开发环境的方法步骤
Oct 30 #Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 #Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 #Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 #Javascript
原生JS与jQuery编写简单选项卡
Oct 30 #jQuery
简单实现jQuery弹窗效果
Oct 30 #jQuery
You might like
用Socket发送电子邮件
2006/10/09 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
vue组件name的作用小结
2018/05/23 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python类装饰器用法实例
2015/06/04 Python
Python计算一个文件里字数的方法
2015/06/15 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
django的登录注册系统的示例代码
2018/05/14 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
函授毕业个人自我评价
2014/02/20 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
写给老师的感谢信
2015/01/20 职场文书
质量保证书怎么写
2015/02/27 职场文书
文艺晚会开场白
2015/05/29 职场文书
教师工作证明范本
2015/06/12 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA