移动端网页开发调试神器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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
JavaScript进制转换实现方法解析
Jan 18 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
一个程序下载的管理程序(四)
2006/10/09 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
jquery中radio checked问题
2015/03/16 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
Javascript的this用法
2017/01/16 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
解析Python编程中的包结构
2015/10/25 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
如何利用python生成MD5并去重
2020/12/07 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
车辆工程专业求职信
2014/04/28 职场文书
入党积极分子考察意见
2015/06/02 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Nginx动静分离配置实现与说明
2022/04/07 Servers