web 调试神器 eruda

一，Eruda是什么

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

查看演示：https://eruda.liriliri.io/

源码链接：https://github.com/liriliri/eruda

二，如何使用

方式一，默认引入：   方式二，动态加载： __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(' 
  '); document.write(' 
  
    eruda.init(); 
  '); })();  方式四 ，npm： npm install eruda --save

三，功能清单

console

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

web 调试神器 eruda

Elements

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

web 调试神器 eruda

Network

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

web 调试神器 eruda