文档章节

eruda 一个为移动端而生的调试神器

苏南-首席填坑官
 苏南-首席填坑官
发布于 2018/12/18 07:43
字数 1995
阅读 571
收藏 18

Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等

引言

​  日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddlerCharleschrome devtoolsFirebug、还有Safari远程调试等比较熟悉,甚至有些是我可能也没有用过的;

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

  俗话说预先善其事必先利其器,今天想给大家分享的是一个可能被人们忽略的小工具,为什么说被人们忽略呢?因为发现github上它才4.6k Star、457 ForkWatch 173次,也就是说千万开发者中知道它的人可能不超过5w,于是决定分享一波,此文重在引导,希望能帮大家开发中带来一点点便利、效率的提升

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

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

Eruda是什么?

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

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

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

首席填坑官∙苏南的专栏 交流: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不小了,用形容妹子的话来说就是:丰满,直接说它胖,你就死定了;
  • 这里的小而美是指小巧功能也强大,界面也好看;
  • 说了这么多 来看看它到底长啥样吧:

在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打开查看console信息,但是如果是做APP的内嵌H5页面,那就只能靠开发阶段在浏览器模拟环境中尽量没有Bug,公众号:honeyBadger8

功能清单

console

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

微信开发必备 h5开发调试,利器Eruda

Elements

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

使用神器eruda 进行移动端调试 PC、Mobile调试节点对比

Network

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

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, ... HTTP is designed to permit intermediate network elements to improve or enable communications between clients and servers,vConsole便是这样一款很棒的移动端DevTools工具,由大厂企鹅出品。但本文把他定位为男二号今天的主角男一号是:Eruda!vConsole的同类。,PC、eruda 数据请求对比

Resources

  • 它跟 Chrome Devtools 里的 Application + Source,两者的结合体;
  • Resources 它能查看 Cookie、localStorage、sessionStorage等信息,并且还能执行清除操作(Application);
  • 它还查看当前页面加载脚本及样式文件;查看页面加载过的图片等资源(Source);
  • 好吧,感觉说的再多,也不如上图直接: Resources 功能分析有哪些关于前端开发技术HTML、CSS、JavaScript 等值得推荐的书籍? 从菜鸟到大 ... 锋利的jQuery第2版 【书籍】. Js知识点. JavaScript深入系列15篇正式完结!

Sources/Info

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

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

高阶用法

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

高级插件用法等你去发现~

结尾:

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

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

  上面二维码确实是真实的官方Demo,不用担心有套路,也有链接:https://eruda.liriliri.io/  Github 地址:https://github.com/liriliri/eruda

IT平头哥联盟

如觉得不错,请记得随手转发,并关注(IT平头哥联盟)支持我们哦~

其他

作者:苏南 - 首席填坑官

链接:https://blog.csdn.net/weixin_43254766

交流:912594095、公号:honeyBadger8

本文原创,著作权归作者所有。商业转载请联系IT平头哥联盟获得授权,非商业转载请注明原链接及出处。

© 著作权归作者所有

苏南-首席填坑官
粉丝 2
博文 21
码字总数 54603
作品 0
深圳
前端工程师
私信 提问
加载中

评论(3)

大明二代
666
一天前
优秀
苏南-首席填坑官
苏南-首席填坑官 博主
君问归期未有期,
巴山夜雨涨秋池。
何当共剪西窗烛,
却话巴山夜雨时。—— 早安~
小技巧|移动端网页调试神器Eruda使用技巧

本文首发于我的博客:dunizb.com 原文链接:dunizb.com/2017/10/16/… 做移动端Web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果...

Dunizb
2018/10/30
0
0
Eruda 一个被人遗忘的调试神器

引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler、Charles、chrome devtools、Firebug、还有Safari远...

苏南
2018/12/17
0
0
移动端网页调试 之 Eruda

前言 我打算将移动端网页调试作为一个专题介绍几个常用的调试工具,主要是样式调试和接口数据调试,目的是在提测和修bugs的阶段能快速定位问题,提高工作效率,这篇文章介绍的是Eruda。 相信...

WinMin
02/20
0
0
调试移动端H5或者查看 移动端H5页面的log信息

目前一般的功能,都是可以使用 桌面浏览器模拟手机端去 调试 移动H5页面的。 但是有些功能 就是得需要去使用手机端的浏览器去测试才知道行不行,有什么问题的。 可是使用手机浏览器去调试的时...

之渊
2018/12/25
0
0
手机网页前端调试面板--Eruda

前言 进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事。特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改...

surunzi
2016/05/05
15K
12

没有更多内容

加载失败,请刷新页面

加载更多

八、Docker Swarm

Docker Swarm有两件事:一个企业级的Docker主机安全集群,另一个是用于协调微服务应用程序的引擎。 在集群方面,它将一个或多个Docker节点组合在一起,并允许你将他们作为一个集群来管理。开...

倪伟伟
38分钟前
0
0
Fragment懒加载其实很简单

前言 记得去年面试的时候, 面了一家小公司, 那个面试官问我, fragment的懒加载做过吗?我说没做过(确实没做过).后来面试快结束了, 又问我, 懒加载没做过是吗?后来可想而知也没收到offer, (ಥ_...

天王盖地虎626
38分钟前
0
0
聊聊dubbo的TimeoutFilter

序 本文主要研究一下dubbo的TimeoutFilter ListenableFilter dubbo-2.7.2/dubbo-rpc/dubbo-rpc-api/src/main/java/org/apache/dubbo/rpc/ListenableFilter.java public abstract class Liste......

go4it
45分钟前
5
0
方法与数组

方法 方法就是完成特定功能的代码块;在很多语言里面都有函数的定义,函数在Java中被称为方法 格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2…) throw 异常{ 函数体;...

凹凸凸
今天
4
0
死磕 java同步系列之StampedLock源码解析

问题 (1)StampedLock是什么? (2)StampedLock具有什么特性? (3)StampedLock是否支持可重入? (4)StampedLock与ReentrantReadWriteLock的对比? 简介 StampedLock是java8中新增的类,...

彤哥读源码
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部