日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddler
、Charles
、chrome devtools
、Firebug
、还有 Safari 远程调试等比较熟悉,甚至有些是我可能也没有用过的;
这里喷一句吧,谁都别给我提 IE 啊,IE 那个不叫调试工具,那叫坑爹神器,话说最近不是又甩锅了,把自己的革命老根据地都甩了。
俗话说预先善其事必先利其器,今天想给大家分享的是一个可能被人们忽略的小工具,为什么说被人们忽略呢?因为发现 github 上它才4.6k Star、457 Fork、Watch 173次,也就是说千万开发者中知道它的人可能不超过 5w,于是决定分享一波,此文重在引导,希望能帮大家开发中带来一点点便利、效率的提升:
Eruda是什么? Eruda 是一个专为前端移动端、移动端设计的调试面板,类似Chrome DevTools
的迷你版(没有 chrome 强大 这个是可以肯定的),其主要功能包括:捕获 console
日志、检查元素状态、显示性能指标、捕获 XHR 请求、显示本地存储
和 Cookie
信息、浏览器特性检测等等。
虽说日常的移动端开发时,一般都是在用 Chrome DevTools 浏览器的移动端模式模拟各种手机型号来进行开发和调试,确保功能 /页面展示等都没有问题了,才会提交测试;
但是前面都讲了,只是模拟、模拟,当下手机品牌可算是千千万,手机中各种类浏览器,甚至 APP 都有自己不一样的特色 腰间盘突出,有的还特别突出,有病我们得给它治啊,不然测试、产品、需求、领导都不会放过我们,比如下图场景。
方式一,默认引入:
<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
);console
诞生之前,我们的调试功能都是 alert 过多,包括现在的移动端,在手机上我们想看到参数值、数据、节点等都以alert打印为多数,但过于粗暴、而且一不小心有可能带到线上去了;chrome
,直接在控制台执行 js 代码;Plugins
插件,做到跟 PC 端一样,形成 dom tree ;
Application
+ Source,两者的结合体;1.0.5
,好像是没有插件这一项的;Dom tree
,插件这部分并没有都实际应用过,所以也就不打肿脸充胖子
了,有兴趣的同学可以自己看看。以上就是今天给大家带来的分享,工作中用了蛮久,挺方便的,对于定位移动端的疑难杂症问题、甚至留下后门定位线上问题都有很大帮助,如文中有理解不到位之处,欢迎留言指出。
线上问题我们一般的做法是喜欢给某个不起眼的元素,添加一个点击事件,要点它十次、八次以后才开启 debug 模式;
上面二维码确实是真实的官方 Demo,不用担心有套路,也有链接:https://eruda.liriliri.io/ Github 地址:https://github.com/liriliri/eruda
如觉得不错,请记得随手转发,并关注( IT 平头哥联盟)支持我们哦~
作者:苏南 - 首席填坑官
链接: https://blog.csdn.net/weixin_43254766
交流:912594095、公号:
honeyBadger8
本文原创,著作权归作者所有。商业转载请联系
IT 平头哥联盟
获得授权,非商业转载请注明原链接及出处。
1
suSouth OP 君问归期未有期,
巴山夜雨涨秋池。 何当共剪西窗烛, 却话巴山夜雨时。—— 早安~ |
2
IsaacYoung 2018-12-18 07:55:36 +08:00 via iPhone
用过 貌似安卓 4.4 兼容有问题
|
3
richard1122 2018-12-18 08:13:32 +08:00
看起来很像 chrome 远程调试器?
|
4
C2G 2018-12-18 08:37:11 +08:00 via Android
用过的学长说兼容性不是很好的样子
|
5
akcode 2018-12-18 09:12:02 +08:00
为什么不用这个。。
https://debugx5.qq.com/ |
6
shell314 2018-12-18 10:35:14 +08:00 via Android
这个可以有
|
7
bhaltair 2018-12-18 11:11:43 +08:00
一直在用
|
8
misaka19000 2018-12-18 11:27:03 +08:00
这是楼主写的吗?
|
9
kkeybbs 2018-12-18 12:22:52 +08:00 via iPhone
和 vconsole.js 挺像
|
10
suSouth OP @misaka19000 不是,我没有这么强大,只是觉得蛮不错,分享一下而已~
|
11
judasnow 2018-12-18 17:56:20 +08:00
6
|
12
litpen 2018-12-19 19:04:22 +08:00
这个有用过,在手机上调试操作不便,能展示的信息不够直观,控制台展示的 log 有限,最后还是用了 spy-debugger 比较稳
|