Eruda 一个可能被人遗忘的调试神器

mingzhong 发布于2019-08-23 14:15 / 2537人阅读

摘要：引言日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的，既然有问题，那就也就有调试，说到调试工具，大家可能对于还有远程调试等比较熟悉，甚至有些是我可能也没有用过的这里喷一句吧，谁都别给我提啊，那个不叫调试工具，那叫坑爹神器，话说最近不

引言

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

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

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

这里是IT平头哥联盟，我是首席填坑官—苏南,用心分享 做有温度的攻城狮。
公众号：honeyBadger8，群：912594095。

Eruda是什么？

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

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

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

如何使用？

它支持npm方式的，这个是不是很开心？？

外链，没错，就是外链的形式引入，对于它，我觉得npm的方式没有什么太大意义，直接以外链的引入更方便，也能减少项目资源包的大小，更便于控制是否要加载这个资源。

方式一，默认引入：



方式二，动态加载：

__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("");
    document.write("eruda.init();");
})();

方式四 ，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/
Github 地址:https://github.com/liriliri/eruda

其他

vue/react/java/大厂面试题等资源免费获取

大家好这就是2018年的我～

月入三万还能少了你一个鸡蛋

如何给localStorage设置一个有效期？

作者：苏南 - 首席填坑官
链接：http://susouth.com/
交流：912594095、公众号：honeyBadger8
本文原创，著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。

云服务器 GPU云服务器说起分布式存储大家可能都会觉得这是一个 Eruda 被遗忘云主机可能出现的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100356.html

小技巧|移动端网页调试神器Eruda使用技巧

摘要：做移动端开发的一大痛点就是，在真机运行下无法查看日志和其他信息如网络请求显示本地存储等信息。是一个专为手机网页前端设计的调试面板，类似的迷你版，其主要功能包括捕获日志检查元素状态显示性能指标捕获请求显示本地存储和信息浏览器特性检测等等。 showImg(https://segmentfault.com/img/bVXvig?w=2396&h=1302); 做移动端Web开发的一大痛点就...

xzavier 2019-08-21 17:19 评论0 收藏0
2019个税，我们每年能省多少钱～

摘要：注意每月元，扣除期限最长不超过个月，扣除人夫妻双方约定，可由其中一方扣除，确定后，一个纳税年度内不得更改。注意医保目录范围内的医药费用支出，医保报销后的个人自付部分累计超过元的部分，且不超过元的部分。 showImg(https://segmentfault.com/img/bVblMkk?w=652&h=298); 　　看大家这些天都在群里讨论，2019年1月1日起个税免征额调整政策...

jhhfft 2019-08-23 14:21 评论0 收藏0
android移动端调试—前端开发工具Eruda

摘要：通过使用通过安装文件对于移动端来说略重后大概。建议通过参数来控制是否加载调试器，比如初始化时可以传入配置用于插件初始化的元素，如果不设置，默认创建作为容器直接置于根结点下面指定要初始化哪些面板，默认加载所有示例 Eruda 通过CDN使用： eruda.init(); 通过npm安装： n...

jeyhan 2021-09-09 09:32 评论0 收藏0
互联网"凛冬"，看大厂HR怎么说~

摘要：写在前面的话最近互联网朋友圈充斥着一股恐慌的气息。本人作为一名，万不敢称资深，只是呆过几年大型央企和大型互联网企业，聊有一点自己的看法罢了。如果不放心，以一周为期，对展示在面前的机会进行初步分级。也可以略高于期望，以此探一探对方的反应。 showImg(https://segmentfault.com/img/bVblxeY?w=1008&h=298); 写在前面的话　　最近互联网朋...

renweihub 2019-08-23 14:26 评论0 收藏0
扯一下似乎被遗忘的盒模型

摘要：不过想想，现在都让微软给退下了，还有多少呢。接着就是要提到的一点，盒模型的计算方式，标准方式和模式是不同的，不知道又想知道的同学请问谷哥或者度娘吧，记得几年前我那本破书上也又提到，还做了一些测试。扯远了，盒模型大概的情况就是这样。前段时间为了组里在扩充人员，在面试的过程中有过几次扯到盒模型这个东西。对于盒模型以前是经常提到，现在被CSS3的风头给盖下去了，已经没多少人去讲盒模型，也导...

Barry_Ng 2019-08-28 17:51 评论0 收藏0