web 调试神器 eruda

柔情只为你懂 2021-09-21 10:40 539阅读 0赞

**一，Eruda是什么**

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

> 查看演示：[https://eruda.liriliri.io/][https_eruda.liriliri.io]
> 
> 源码链接：[https://github.com/liriliri/eruda][https_github.com_liriliri_eruda]

**二，如何使用**

方式一，默认引入：
    <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();
    });
    
    方式三 ，指定场景加载：
    //比如线上 给自己留一个后门，
    //我们一般的做法是喜欢给某个不起眼的元素，添加一个点击事件，要点它十次、八次以后才开启 debug 模式；
    //下面是通过url链接控制
    ;(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>');
    })();
    
    <script>
            // 记录点击次数
            var clickCount = 0
            // 设置连点监听
            document.addEventListener('click', function() {
                clickCount++;
                if(clickCount === 10) {
                    showConsole()
    				clearInterval(initCount);
                }
            })
            var initCount = setInterval(function() {
                clickCount = 0
            }, 2000)
            function showConsole() {
                var protocol = location.protocol
                protocol = protocol === ('https:' || 'http:') ? protocol : 'http:'
                var src = protocol +'//cdn.jsdelivr.net/npm/eruda';
                document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
                document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
            }
        </script>
    
    方式四 ，npm：
    npm install eruda --save
    <script src="node_modules/eruda/eruda.min.js"></script>
    <script>eruda.init();</script>

**三，功能清单**

console

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VjaGl6YW8xODM5_size_16_color_FFFFFF_t_70][]

Elements

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

![format_png][]

Network

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

![format_png 1][]

Resources

*  它跟 Chrome Devtools 里的 `Application` \+ Source,两者的结合体；
 *  Resources 它能查看 Cookie、localStorage、sessionStorage等信息，并且还能执行清除操作（Application）；
 *  它还查看当前页面加载脚本及样式文件；查看页面加载过的图片等资源（Source）；

好吧，感觉说的再多，也不如上图直接：

![format_png 2][]

Sources/Info

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

![format_png 3][]

**高阶用法**

*  以上刚才介绍的是它的一些基本的功能，也是我自己在工作中用的较多的；
 *  最近发现新版本功能要强大不少，之前一直用的`1.0.5`，好像是没有插件这一项的；
 *  大概看了一下，都蛮强大，包括上面的`Dom tree`
 *  如果觉得已经的插件都满足不了你的需求，它还支持自定义插件自己编写。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VjaGl6YW8xODM5_size_16_color_FFFFFF_t_70 1][]

[https_eruda.liriliri.io]: https://eruda.liriliri.io/
[https_github.com_liriliri_eruda]: https://github.com/liriliri/eruda
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VjaGl6YW8xODM5_size_16_color_FFFFFF_t_70]: /images/20210920/3aec3e9383634ddbab387ded9abeb8da.png
[format_png]: /images/20210920/2d299a79065743d8a1880004d0e814d3.png
[format_png 1]: /images/20210920/21a5b0573c464ba39b4f879ed708f652.png
[format_png 2]: /images/20210920/307bcadcb92d40328fb0782b4071f9b0.png
[format_png 3]: /images/20210920/37cd221e10614901bc0ea4af535df409.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VjaGl6YW8xODM5_size_16_color_FFFFFF_t_70 1]: /images/20210920/59dfb9a17e894ca1937c60227373ed30.png