移动端网页开发调试神器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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
html中table数据排序的js代码
Aug 09 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
新手简单了解vue
May 29 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
微信小程序如何获取用户头像和昵称
Sep 23 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
PHP 处理图片的类实现代码
2009/10/23 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
python中for in的用法详解
2020/04/17 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
植树节活动总结
2014/04/30 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis