本文已参加「新人创造礼」活动,一起敞开创造之路。​

一，Eruda是什么

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

检查演示：Eruda: Console for Mobile Browsers

源码链接：GitHub – liriliri/eruda: Console for mobile browsers

二，怎么使用

方法一，默认引进：
<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>

web 调试神器 eruda

三，功用清单

console

  • console 的作用就不必废话了，咱们都懂；

  • 早期在console诞生之前，咱们的调试功用都是alert过多，包含现在的移动端，在手机上咱们想看到参数值、数据、节点等都以alert打印为多数，但过于粗犷、而且一不小心有或许带到线上去了；

  • eruda 能帮咱们处理这个问题；一切的日志、错误都能帮咱们捕获到

  • 乃至咱们还能像chrome,直接在控制台执行js代码；

web 调试神器 eruda
web 调试神器 eruda​修改

Elements

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

web 调试神器 eruda
web 调试神器 eruda​修改

Network

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

web 调试神器 eruda
web 调试神器 eruda​修改

Resources

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

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

web 调试神器 eruda
web 调试神器 eruda​修改

Sources/Info

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

web 调试神器 eruda
web 调试神器 eruda​修改

高阶用法

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

web 调试神器 eruda
web 调试神器 eruda​修改

​