引言

​  日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddlerCharleschrome devtoolsFirebug、还有Safari远程调试等比较熟悉,甚至有些是我可能也没有用过的;

  这里喷一句吧,谁都别给我提IE啊,IE那个不叫调试工具,那叫坑爹神器,话说最近不是又甩锅了,把自己的革命老根据地都甩了。

  俗话说预先善其事必先利其器,今天想给大家分享的是一个可能被人们忽略的小工具,为什么说被人们忽略呢?因为发现github上它才4.6k Star、457 ForkWatch 173次,也就是说千万开发者中知道它的人可能不超过5w,于是决定分享一波,此文重在引导,希望能帮大家开发中带来一点点便利、效率的提升

这里是IT平头哥联盟,我是首席填坑官苏南,用心分享 做有温度的攻城狮。

Eruda是什么?

  Eruda是什么?Eruda 是一个专为前端移动端移动端设计的调试面板,类似Chrome DevTools 的迷你版(没有chrome强大 这个是可以肯定的),其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储Cookie 信息、浏览器特性检测等等。

  虽说日常的移动端开发时,一般都是在用Chrome DevTools浏览器的移动端模式模拟各种手机型号来进行开发和调试,确保功能/页面展示等都没有问题了,才会提交测试;

  但是前面都讲了,只是模拟模拟,当下手机品牌可算是千千万,手机中各种类浏览器,甚至APP都有自己不一样的特色 腰间盘突出,有的还特别突出,有病我们得给它治啊,不然测试、产品、需求、领导都不会放过我们,比如下图场景。

如何使用?

  • 它支持npm方式的,这个是不是很开心??
  • 外链,没错,就是外链的形式引入,对于它,我觉得npm的方式没有什么太大意义,直接以外链的引入更方便,也能减少项目资源包的大小,更便于控制是否要加载这个资源。
方式一,默认引入:
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script> 方式二,动态加载: __DEBUG__ && loadJS('http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js', ()=>{
eruda.init();
});//苏南的专栏 交流:912594095、公众号:honeyBadger8 方式三 ,指定场景加载:
//比如线上 给自己留一个后门,
//我们一般的做法是喜欢给某个不起眼的元素,添加一个点击事件,要点它十次、八次以后才开启 debug 模式;
;(function () {
var src = 'http://cdn.jsdelivr.net/eruda/1.0.5/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>');
})(); 方式四 ,npm:
npm install eruda --save …… 加载的方式很多

小而美

  • 这里小,不是指它的包小啊,知道它的同学都知道,其实它的包并不小(约100kb gzip);
  • 100kb不小了,用形容妹子的话来说就是:丰满,直接说它胖,你就死定了;
  • 这里的小而美是指小巧功能也强大,界面也好看;
  • 说了这么多 来看看它到底长啥样吧:

功能清单

console

  • console 的作用就不用废话了,大家都懂;
  • 早期在console诞生之前,我们的调试功能都是alert过多,包括现在的移动端,在手机上我们想看到参数值、数据、节点等都以alert打印为多数,但过于粗暴、而且一不小心有可能带到线上去了;
  • eruda 能帮我们解决这个问题;所有的日志、错误都能帮我们捕获到
  • 甚至我们还能像chrome,直接在控制台执行js代码;

Elements

  • eruda 它没有在PC端这么直观,但也因为在移动端展示的方式局限性,
  • 它能把每一个父节点下的每一个子节点全部列出来;你点击某个子节点时,列出当前节点全部的属性、样式、盒子模型等;
  • 查看标签内容及属性;查看Dom上的样式;支持页面元素高亮;支持屏幕直接点击选取;查看Dom上绑定的各类事件。
  • 甚至也能使用Plugins 插件,做到跟PC端一样,形成 dom tree;



Network

  • 现在的项目大多都是前后端分享的形式了,前端处理的业务越来越多、各种请求资源等;
  • 干的越多承担责任也越多、锅也越多,又大又平的那种哦~
  • 所以 Network 的必要性不言而喻,它能捕获请求,查看发送数据、返回头、返回内容等信息,它对于我们平时前后端联调出现的问题定位是有很大帮助的,比如:后端说你请求参数少了,前端你看了代码逻辑没有问题,但在手机上就是调不通,Network 能很直接明了的看到你请求带了什么。

Resources

  • 它跟 Chrome Devtools 里的 Application + Source,两者的结合体;
  • Resources 它能查看 Cookie、localStorage、sessionStorage等信息,并且还能执行清除操作(Application);
  • 它还查看当前页面加载脚本及样式文件;查看页面加载过的图片等资源(Source);
  • 好吧,感觉说的再多,也不如上图直接:

Sources/Info

  • Sources:查看页面源码;格式化html,css,js代码及json数据。
  • Info:主要输出URL信息及User Agent;及其他的一些手机系统信息,同时也支持自定义输出内容哦。

高阶用法

  • 以上刚才介绍的是它的一些基本的功能,也是我自己在工作中用的较多的;
  • 最近发现新版本功能要强大不少,之前一直用的1.0.5,好像是没有插件这一项的;
  • 大概看了一下,都蛮强大,包括上面的Dom tree,插件这部分并没有都实际应用过,所以也就不打肿脸充胖子了,有兴趣的同学可以自己看看。
  • 如果觉得已经的插件都满足不了你的需求,它还支持自定义插件自己编写。

结尾:

  以上就是今天给大家带来的分享,工作中用了蛮久,挺方便的,对于定位移动端的疑难杂症问题、甚至留下后门定位线上问题都有很大帮助,如文中有理解不到位之处,欢迎留言指出。

  线上问题我们一般的做法是喜欢给某个不起眼的元素,添加一个点击事件,要点它十次、八次以后才开启 debug 模式;

  上面二维码确实是真实的官方Demo,不用担心有套路,也有链接:https://eruda.liriliri.io/

如觉得不错,请记得随手转发,并关注(IT平头哥联盟)支持我们哦~

其他

作者:苏南 - 首席填坑官

链接:https://blog.csdn.net/weixin_43254766

交流群:912594095[资源获取/交流群]、公众号:honeyBadger8

本文原创,著作权归作者所有。商业转载请联系IT平头哥联盟获得授权,非商业转载请注明原链接及出处。

Eruda 一个被人遗忘的移动端调试神器的更多相关文章

  1. Eruda 一个被人遗忘的调试神器

    Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...

  2. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  3. 移动端调试神器vConsole

    vConsole.js 其实就是重写console方法,实现了类似于微信小程序的移动端调试效果 在普通html文件里使用 <script src="https://cdn.bootcs ...

  4. 移动端调试神器(eruda)

    在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种 ...

  5. 两大js移动端调试神器 / 调试工具分享 !

    分享大家一个CDN网站:https://www.bootcdn.cn/ eruda 移动端网页调试工具的使用: <script src="https://cdn.bootcdn.net ...

  6. 移动端调试神器 whistle

    移动端h5页面嵌入的方式多种多样,普通的chrome真机调试功能有时就不能满足要求了. whistle通过设置wifi服务器代理的方式,可以抓包调试所有移动端请求的页面. whistle的github ...

  7. 移动端调试神器-vConsole

    什么是vConsole?   官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...

  8. 移动端调试利器-vConsole

    现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可 ...

  9. 重新认识被人遗忘的HTTP头注入

    前言 注入类漏洞经久不衰,多年保持在owasp Top 10的首位.今天就聊聊那些被人遗忘的http头注入.用简单的实际代码进行演示,让每个人更深刻的去认识该漏洞. HOST注入 在以往http1.0 ...

随机推荐

  1. celery4+django2定时任务

    网上有很多celery + django实现定时任务的教程,不过它们大多数是基于djcelery + celery3的: 或者是使用django_celery_beat配置较为繁琐的. 显然简洁而高效 ...

  2. Jquery 强大的表单验证操作

    参考资料: 1.https://www.cnblogs.com/linjiqin/p/3431835.html(此篇最佳) 2.https://blog.csdn.net/pengjunlee/art ...

  3. vb.net 分割byte数组的方法SplitBytes

    以下代码随手写的 并没有大量测试 效率也有待提升 如果需要C#的请自行转换 Function SplitBytes(Data As Byte(), Delimiter As Byte()) As Li ...

  4. TCP/IP,Web世界的基本规则

    TCP/IP协议     TCP/IP 是因特网的通信协议.通信协议是对计算机必须遵守的规则的描述,只有遵守这些规则,计算机之间才能进行通信.浏览器与服务器就是通过这个协议连接在互联网上的,还有电子邮 ...

  5. 814-Binary Tree Pruning

    Description: We are given the head node root of a binary tree, where additionally every node’s value ...

  6. java的ArrayList源码摘要

    ArrayList本质上是一组对象数组,ArrayList有三种构造方法 1.指定长度创建ArrayList,2.默认长度为10创建.3,用旧的集合创建一个ArrayList. 对ArrayList的 ...

  7. Linux基础:CentOS安装python3.7

    1.下载python3 wget https://www.python.org/ftp/python/3.7.0/Python-3.7.0.tgz 2.解压 [root@mycentos ~]# ta ...

  8. (一)MYSQL ERROR 2003 (HY000): Can't connect to MySQL server on '192.168.10.210' (111) 解决方法

    今天在测试MySQL的连接时候,发现连接不通过,并报错ERROR 2003 (HY000): Can't connect to mysql server on '192.168.10.210' (11 ...

  9. 【代码笔记】Web-CSS-CSS Display

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. Arcgis瓦片--js客户端加载

    接上篇博客,下载好arcgis格式的瓦片数据以后,需要用js客户端在前端加载出来.这里介绍两种方案: 1.使用超图iServer将瓦片发布成rest地图服务,或者arcgis地图服务,客户端直接加载 ...