Eruda 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Eruda 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
收录时间: 2016-05-05
提 交 者: surunzi

前言

进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事。特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改代码,重新打开页面并alert一下。你可能会说,可以使用Chrome,Firefox连接手机调试啊!但那样限定于使用相应的手机版浏览器,意义并不大。Weinre,Vorlonjs跟debugGap等工具实际上也并不好用,初始化过于繁琐,而且仅能调调样式,打打log,断点调试什么的也没有办法支持。每次测试出现问题,基本上只能屁颠屁颠地跑过去拿手机过来连接自己的本地环境改代码查bug。每当这时候我便会想,如果手机上也能有个跟PC端浏览器一样的DevTools就好了,那样的话我就不用再在每个页面前面都写上一句`window.onerror = function (msg) { alert(msg) }`了(内心:真是个2B的做法)。

https://github.com/liriliri/eruda

示例


请在手机上打开链接:http://liriliri.github.io/eruda/index.html?eruda=true

安装

你可以通过npm来下载使用该工具:

npm install eruda --save

然后在页面中引入以下脚本:

(function () {
    var src = 'node_modules/eruda/dist/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();

可以看到只有当url上带有eruda=true或本地存储active-eruda为true的时候,工具才会被加载并执行。其中设置面板有选项可以设置active-eruda使工具常驻,不用每次都在url上添加eruda=true。

    注:该插件的文件gzip后大小约有50+kb,相比于项目页均js脚本量几kb来说还是太大,并不适合在现网环境加载影响页面载入速度。

功能面板介绍

Console面板
该面板会替换console对象中的log,error,info,warn,dir,time,timeEnd方法以不同的样式显示出来,同时默认会通过onerror捕获全局错误(可以在设置面板关闭),打出错误信息及其堆栈。当然,日志的清除与过滤也是支持的,还可以直接在该面板输入js脚本并在全局作用域下执行。该面板还内置了一些快捷指令来快速执行一些有用的功能,比如在页面载入jQuery或underscore,使用正则表达式过滤log等。

Elements面板
查看Dom状态对于调试工具自然是一个必不可少的功能。通过该工具,你无需连接PC端调试工具就能轻松查看DOM节点上的各个属性值,内容,应用的CSS样式。被查看的元素也会在页面上高亮,能够使你快速知晓DOM元素的margin,padding。

注:感谢weinre项目,扒了一点代码:)

Network面板

Network面板通过performance接口以图表的形式展示页面的加载速度。计划在resource timing api得到广泛应用时再加入各个资源的加载情况,不过目前它仅仅只能得到页面的加载速度。

Resources面板

该面板主要用来展示localStorage,cookie,页面脚本,样式,图片等资源,同时能够对其执行一些简单的操作,如清除指定的localStorage条目。

Info面板

很多时候会需要查看复制浏览器上的指定信息,比如通过JsBridge获取到的用户Id,用于后台数据查错。又比如,测试碰到某些页面错误时,我们首先做的一件事经常是:把链接发给我看看,然而APP里并没有复制链接的选项:( 还有,一个页面在不同环境下需要有不同的表现,项目H5页面经常需要在不同APP里有不同表现以及调用不同jsApi。靠什么来区分?UA。然而有时候对某个版本UA检测不准确就会造成页面出BUG,这时候如果有个方便的方法能够快速查看到出错者的浏览器UA就太好了。

综上,Info面板默认会展示出url和user-agent两条信息,你也可以通过调用它的接口输出其它指定信息。

Snippets面板

Console面板可以执行js脚本,但在手机上输入代码体验实在不怎么样。利用该面板你可以添加一些方法以便于快速和多次触发它。Sinppets默认加入了两个脚本,为页面所有元素加border查看排版结构以及重刷页面。

Features面板

嗯,之前碰到过BUG,结果发现是APP的WebView没开启对localStorage的支持,所以有了该面板。它会检测一些常用的功能是否被浏览器所支持,不支持的话将以红色高亮进行显示。

自定义插件

Eruda本质上只是一个可拖拽的入口按钮加一个Tab组件,其中的每个面板都是一个独立的插件。所以,事实上你可以自行添加各种自定义的信息展示面板,具体可参考这个页面FPS展示插件。这是一个很有用的特性,因为通用组件很难做到适应于各类需求,有很多时候你会想要去扩展它。比如,项目用于移动端测试环境切换的工具会在每个页面嵌入该插件用于不同环境的切换,同时显示ID便于查找单次请求所对应的完整HTTP记录,它长下面这个样子:



结语

Eruda调试面板的基础工具库:http://liriliri.github.io/eustia/

展开阅读全文

代码

Eruda 的相关资讯

Eruda 的相关博客

Eruda 一个被人遗忘的调试神器

Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有...

eruda手机端调试神器

在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,如果想在手机上能和浏览器一样看控制台调试就更...

Web移动端调试利器eruda的使用

在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机...

优雅地使用eruda在移动端上调试网页

注:本文有一小部分截图为桌面端,但所有内容都亲测在移动端上可用。 你曾否在洛谷上用<F12>把错的数据点改成AC?是否有过自己...

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

引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能...

移动端js调试工具:eruda

Eruda 一个被人遗忘的调试神器

Eruda 一个被人遗忘的移动端调试神器

引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能...

eruda/vconsole 手机端调试利器

0、对比 edura 相比 vconsole 可以看css样式 1、edura 1.1 <script>(function () { var script = document.createElement('s...

O2OA开源免费开发平台:启用Eruda进行移动端调试

O2OA平台启用Eruda进行移动端调试 Eruda 是一个专为前端移动端、移动端设计的调试面板,类似Chrome DevTools 的迷你版(没有c...

调试移动端的三种方法

我们在开发手机版网页的时候,常常会出现下面的情景: * 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上...

Eruda 的相关问答

还没有任何问答,马上提问

评论 (12)

加载中
可以参考下 react native 的关于手机上调试的实现方式 #Eruda#
2016/05/06 09:35
回复
举报
太酷了 #Eruda#
2016/05/06 10:28
回复
举报
#BrowserSync#有什么区别? browser-sync可以直接在PC的浏览器中调试ipad中的网页 #Eruda#
2016/05/06 15:49
回复
举报
看了下。完爆腾讯的vConsole #Eruda#
2016/05/07 08:43
回复
举报
之前在微信看到vconsole,这个也不错 #Eruda#
2016/05/08 09:30
回复
举报
神器一款 #Eruda#
2016/05/09 12:57
回复
举报
貌似还不错的样子,用下试试 #Eruda#
2016/05/09 17:27
回复
举报
应该出配置项,毕竟不是所有项目都要所有功能 #Eruda#
2016/05/10 19:40
回复
举报
一般都是 用代理抓包来调试 #Eruda#
2016/05/11 13:57
回复
举报
iphone6没看到按钮 #Eruda#
2016/05/11 14:02
回复
举报
更多评论
12 评论
412 收藏
分享
返回顶部
顶部