前言

进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事。特别是当目标环境为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来下载使用该工具:

  1. npm install eruda --save

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

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

可以看到只有当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——手机网页前端调试面板的更多相关文章

  1. 【转】手机web前端调试页面的几种方式

    前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...

  2. 手机web前端调试页面的几种方式

    前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...

  3. vConsole--针对手机网页的前端 console 调试面板。

    一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://we ...

  4. 前端读者 | 前端开发者调试面板vConsole

    来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. 特性 查看 conso ...

  5. 手机网页调试利器: Chrome

    新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页 ...

  6. chorme插件 ,在浏览器上模拟手机,pad 查看网页|前端技术开发必备插件

    网址:http://lab.maltewassermann.com/viewport-resizer/使用方法:1在chrome浏览器上方右击,显示书签栏 2 打开插件网址,将<ignore_j ...

  7. 用MVC做支付宝手机网页支付问题

    支付宝支付接口手机网页支付 从官网扒下来的demo阿里做得还是相当不错的,只要参数改正确了基本上都是能跑通,WebForm的没什么大问题,这次要讲的主要是几个要注意的问题,因为是用MVC来做. 1.要 ...

  8. 转载:手机网页制作的认识(有关meta标签)

    下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...

  9. 写给IOS开发工程师的网页前端入门笔记

    前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求.比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求 ...

随机推荐

  1. [Java] 字符流 Writer,输出字符数据PrintWriter

    package test.stream; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fi ...

  2. java -d64

    在 resin启动时指定java时加上了 -d64选项 JAVA="/xx/java -d64" 选择 "-server"选项必须使用-d64 http://b ...

  3. Mingyang.net:org.springframework.context.annotation.ConflictingBeanDefinitionException

    org.springframework.context.annotation.ConflictingBeanDefinitionException: Annotation-specified bean ...

  4. Troubleshooting 'library cache: mutex X' Waits.

    What is a 'library cache: mutex X' wait? The mutex feature is a mechanism to control access to in me ...

  5. 动手学servlet(三) 请求头和响应头信息

    获取请求头信息 package servletdemo; import java.io.IOException; import java.util.Enumeration; import javax. ...

  6. js中字符串的截取

    当需要从一组数据中移除到符合条件的某一个数据的时候,在这种情况下如何进行截取呢? 基本思路: ①将其通过特定的符号,将一组字符串进行拼接,或者用","或者用"+" ...

  7. java中好玩的案例

    1:实现猜数字游戏, 如果没有猜对可以继续输入你猜的数字,如果猜对了停止程序. 最多只能猜三次,如果还剩下最后一次机会的时候要提醒用户. 代码: Random random = new Random( ...

  8. iOS  Emoji表情编码/解码

    之前做弹幕的时候 遇到的表情编码解码问题 表情编码一般是使用unicode编码 ,编码之后的格式 \ud83d\ude18\ud83d\ude18world\u4e16\u754chaha\ud83d ...

  9. 自定义PageControl样式

    #define iOS7 ([[UIDevice currentDevice].systemVersion doubleValue] >= 7.0) //调用方法 改变PageControl样式 ...

  10. 洛谷P1218 [USACO1.5]特殊的质数肋骨 Superprime Rib

    P1218 [USACO1.5]特殊的质数肋骨 Superprime Rib 284通过 425提交 题目提供者该用户不存在 标签USACO 难度普及- 提交  讨论  题解 最新讨论 超时怎么办? ...