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

引言

平常工做中再牛逼的大佬都不敢说本身的代码是彻底没有问题的，既然有问题，那就也就有调试，说到调试工具，你们可能对于 fiddler、Charles、chrome devtools、Firebug、还有Safari远程调试等比较熟悉，甚至有些是我可能也没有用过的；css

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

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

在平常的移动端开发时，通常都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端,宝剑锋从磨砺出，梅花香自苦寒来，作有温度的攻城狮!，公众号：honeyBadger8

github 数据

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

Eruda是什么？

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

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

可是前面都讲了，只是模拟、模拟，当下手机品牌可算是千千万，手机中各类类浏览器，甚至APP都有本身不同的特点腰间盘突出，有的还特别突出，有病咱们得给它治啊，否则测试、产品、需求、领导都不会放过咱们，好比下图场景。chrome

作移动端Web开发的一大痛点就是，在真机运行下没法查看console.log日志和其余信息如网络请求、显示本地存储等信息。若是网页是运行在,首席填坑官∙苏南的专栏交流：91259409五、公众号：honeyBadger8

项目上线场景图

如何使用？

它支持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(); });//苏南的专栏 交流：91259409五、公众号：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不小了，用形容妹子的话来讲就是：丰满，直接说它胖，你就死定了；
这里的小而美是指小巧功能也强大，界面也好看;
说了这么多来看看它到底长啥样吧：

作移动端Web开发的一大痛点就是，在真机运行下没法查看console.log日志和其余信息如网络请求、显示本地存储等信息。若是网页是运行在手机浏览器中还算好，能够把网址在电脑上打开查看console信息，可是若是是作APP的内嵌H5页面，那就只能靠开发阶段在浏览器模拟环境中尽可能没有Bug,公众号：honeyBadger8

小而美不叫胖那叫丰满

功能清单

console

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

console 演示

Elements

eruda 它没有在PC端这么直观，但也由于在移动端展现的方式局限性，
它能把每个父节点下的每个子节点所有列出来；你点击某个子节点时，列出当前节点所有的属性、样式、盒子模型等；
查看标签内容及属性；查看Dom上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看Dom上绑定的各种事件。
甚至也能使用Plugins 插件，作到跟PC端同样，造成 dom tree；

PC、Mobile调试节点对比

Network

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

vConsole即是这样一款很棒的移动端DevTools工具，由大厂企鹅出品。但本文把他定位为男二号，今天的主角男一号是：Eruda！vConsole的同类。,PC、eruda 数据请求对比

妈妈不再用担忧个人数据问题

Resources

它跟 Chrome Devtools 里的 Application + Source,二者的结合体；
Resources 它能查看 Cookie、localStorage、sessionStorage等信息，而且还能执行清除操做（Application）；
它还查看当前页面加载脚本及样式文件；查看页面加载过的图片等资源（Source）；
好吧，感受说的再多，也不如上图直接：Application + Source 结合体

Sources/Info

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

一般写前端页面都在Chrome浏览器的开发模式下进行调试，可是写放在移动端的H5页面时，有时候会遇到在Chrome上调试没有问题，可是在手机的浏览器上有问题的状况；也有的页面是须要放在微信公众号中的，调用了微信JSSDK的方法，必须得经过手机上的微信内置浏览器才能使用，这个时候若是遇到了报错，只可以经过alert一步一步地定位问题。今天发现了一个好用的能够在手机浏览器上直接定位问题的插件：eruda.js,Resources 功能分析

源代码设备等信息

高阶用法

以上刚才介绍的是它的一些基本的功能，也是我本身在工做中用的较多的；
最近发现新版本功能要强大很多，以前一直用的1.0.5，好像是没有插件这一项的；
大概看了一下，都蛮强大，包括上面的Dom tree,插件这部分并无都实际应用过，因此也就不打肿脸充胖子了，有兴趣的同窗能够本身看看。
若是以为已经的插件都知足不了你的需求，它还支持自定义插件本身编写。

高级用法

结尾：

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

线上问题咱们通常的作法是喜欢给某个不起眼的元素，添加一个点击事件，要点它十次、八次之后才开启 debug 模式；json

上面二维码确实是真实的官方Demo，不用担忧有套路,也有连接：eruda.liriliri.io/ 后端

Github 地址:github.com/liriliri/er…