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

古城微笑少年丶 2023-06-30 11:54 66阅读 0赞

### Eruda是什么？ ###

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

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

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

![做移动端Web开发的一大痛点就是，在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在,首席填坑官∙苏南的专栏 交流：912594095、公众号：honeyBadger8][Web_console.log_ _912594095_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();
    });//苏南的专栏 交流：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不小了，用形容妹子的话来说就是：丰满，直接说它胖，你就死定了；
 *  这里的小而美是指小巧功能也强大，界面也好看;
 *  说了这么多 来看看它到底长啥样吧：

![做移动端Web开发的一大痛点就是，在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器中还算好，可以把网址在电脑上打开查看console信息，但是如果是做APP的内嵌H5页面，那就只能靠开发阶段在浏览器模拟环境中尽量没有Bug,公众号：honeyBadger8][Web_console.log_console_APP_H5_Bug_honeyBadger8]小而美 不叫胖 那叫丰满

### 功能清单 ###

console

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

![微信开发必备】h5开发调试，利器Eruda ，公众号：honeyBadger8][h5_Eruda _honeyBadger8]console 演示

Elements

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

![使用神器eruda 进行移动端调试-，公众号：honeyBadger8][eruda _-_honeyBadger8]![PC、Mobile调试节点对比][PC_Mobile]PC、Mobile调试节点对比

Network

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

![vConsole便是这样一款很棒的移动端DevTools工具，由大厂企鹅出品。但本文把他定位为男二号，今天的主角男一号是：Eruda！vConsole的同类。,PC、eruda 数据请求对比][vConsole_DevTools_Eruda_vConsole_PC_eruda]妈妈再也不用担心我的数据问题

Resources

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

Sources/Info

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

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

### 高阶用法 ###

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

![通常写前端页面都在Chrome浏览器的开发模式下进行调试，但是写放在移动端的H5页面时，有时候会遇到在Chrome上调试没有问题，但是在手机的浏览器上有问题的情况；也有的页面是需要放在微信公众号中的，调用了微信JSSDK的方法，必须得通过手机上的微信内置浏览器才能使用，这个时候如果遇到了报错，只能够通过alert一步一步地定位问题。今天发现了一个好用的可以在手机浏览器上直接定位问题的插件：eruda.j,其主要功能包括：捕获console日志、检查元素状态、捕获XHR请求、显示本地存储，Resources 功能分析][Chrome_H5_Chrome_JSSDK_alert_eruda.j_console_XHR_Resources]高级用法

结尾：

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

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

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

Github 地址:[github.com/liriliri/er…][github.com_liriliri_er]

[Web_console.log_ _912594095_honeyBadger8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNGQ1NjA3ZTRlYWZm?x-oss-process=image/format,png
[Web_console.log_console_APP_H5_Bug_honeyBadger8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNGQ1NjBjNzU5NzQ3?x-oss-process=image/format,png
[h5_Eruda _honeyBadger8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNGQ1NjBjMjA0MzYy?x-oss-process=image/format,png
[eruda _-_honeyBadger8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNGQ1NTViMjcxYjM1?x-oss-process=image/format,png
[PC_Mobile]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNGQ1NjAwZGZmYjcx?x-oss-process=image/format,png
[vConsole_DevTools_Eruda_vConsole_PC_eruda]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNGQ1NjgzMGE2NTdm?x-oss-process=image/format,png
[Resources]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNGQ1NzM4YzIzNzJl?x-oss-process=image/format,png
[Chrome_H5_Chrome_JSSDK_alert_eruda.js_Resources]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNGQ1NjVlNGMxOTU3?x-oss-process=image/format,png
[Chrome_H5_Chrome_JSSDK_alert_eruda.j_console_XHR_Resources]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8xNi8xNjdiNTVlNjQ0YTc0ZmYz?x-oss-process=image/format,png
[eruda.liriliri.io]: https://link.juejin.im/?target=https%3A%2F%2Feruda.liriliri.io%2F
[github.com_liriliri_er]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fliriliri%2Feruda