移动端网页开发调试神器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 Cookie的读取和写入函数
Dec 08 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
jquery实现submit提交表单
Feb 03 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 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 strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
详解Python 函数如何重载?
2019/04/23 Python
Python之pymysql的使用小结
2019/07/01 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
物业招聘计划书
2014/01/10 职场文书
写给老师的表扬信
2014/01/21 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
教学质量月活动总结
2015/05/11 职场文书
入队仪式主持词
2015/07/04 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS