正在加载...
2013-4
13
发表于: Web前端 | 作者: | 目前已阅读: 14,555 次
标签:

上次web沙龙上和大家分享了关于移动时代汹涌而来的一些具体数据,同时无论是基于browser还是WebView,我们团队都了一些实践。本文旨在对目前的移动终端上web前端调试遇到的问题和解决方案进行初步探讨,从而抛砖引玉,引起大家的进一步关注、分析和思考(如同之前对web性能测试解决方案的一系列讨论)

首先,我们来看下在PC上调试的一些常用的手段和技巧。

序号 功能 工具
1 测试环境配置 Hosts, fiddler等及我们团队的利器NoHost
2 DOM节点,样式校正,Console 浏览器自带工具及第三方对比工具
3 网络抓包 浏览器自带工具或httpwatchfiddler第三方工具
4 文件替换 fiddlerminnow等代理工具
5 脚本调试 浏览器自带,Script debuggerVS
6 性能检查 浏览器自带或dynatrace等第三方工具

然而当我们把页面放到移动终端的时候,会猛然发现在PC上的技能和工具顿时没有了用武之地。在操作系统、屏幕大小、浏览器自身能力和扩展能力以及优秀的第三方工具等等各个方面都受到了很大的限制。所以,抛弃过往的工具,我们只能另辟蹊径。同时也期待移动设备上的浏览器自身会有很好的内置调试器出现,虽然用在webview上还要很多额外工作,但是至少我们在PC内嵌上做了很多尝试:)。

一、PC上的开发和调试方式,是否还有用?

当然还是有效的,因为我们70%以上的开发工作仍然是在PC上进行的。你仍然可以使用你最爱的firefox/firebugchrome进行开发和基础调试。同时,所幸的是各个移动版本的浏览器(无论是内置,还是第三方浏览器)都对HTML5 basic CSS3 basic都有较好的支持(如下图)。所以在不使用特殊特性的情况下,基于PC标准浏览器的自我开发和调试是有效。而不同终端的差异或非统一标准化的那部分,我们后面再看如何解决。


二、采用模拟器或云工具进一步进行测试

通过User-Agent的处理模拟终端请求等方式并不能真的让我们的逻辑跑在预期的平台上,所以终端开发同学大都会使用模拟器这个东西。模拟器是手机操作系统开发商提供给开发者高仿真机运行的工具,开发者可以在模拟器窗口上模拟手机操作系统载入和按键触屏操作等。用模拟器的好处在于可以复用PC上的一些网络配置和抓包工具(但有些设备是不支持USB共享网络的),这里不赘述(如下图)。


对于已经发布到外网的页面,我们不但可以模拟器,还可以使用云服务。没错,现在是云时代了,无论什么都可以云端化,而且云背后有些是挂载的真机哦(egWebPageTest就是挂载真正的浏览器来进行性能测试的)。这里我们简单介绍两个口碑较好的工具:

1、DeviceAnywhere.com

2、Perfectomobile.com

其基本原理是把实际手持设备连接到它的数据中心,然后通过一个单独的应用程序为最终用户创建虚拟视图。这个数据中心就像是 “Matrix” 的一部分,可以通过 Internet 连接访问它,最终得到 “Borg” 的线索。

同时,目前也了解到其他团队的一些研发测试情况是抓主流的设备进行测试,并不是考虑大而全的问题,这个思路作为参考补充。

 

三、测试环境和内网研发问题如何处理?

对于有些安全级别比较高的公司,是不允许建立热点的,同时开发运营测试网络和办公网络或手机可以接入的网络是隔离的。这种情况对于没有发布和多个测试环境场景的移动web应用来收,就非常的被动了。除了找公司网管协商对策和发布未在真机跑过测试的代码出去之外,我们有更简单的技术解决方案—NoHost(即通过外网代理层+IP帐号等权限控制+Local DNS,来实现多测试环境轻松访问和切换)。


接入NoHost系统之后,这个问题便迎刃而解。开发这需要做的事情就是在页面上浮出选择框上选择你要使用的环境即可。同时还有个最大的好处:可以在replay系统上如同fiddler一样完全重现终端设备上的访问情况


这里我们还有一些工作需要做:

1NoHost环境切换按钮在移动终端展示的UI优化

2NoHost环境切换按钮的隐藏逻辑支持

3、移动终端案例,支持到NoHost官网

四、如何在真机上进行远程调试处理?

首先很多同学肯定会先想到,是不是可以直接使用浏览器的remote debugging模式呢?这里主要考虑到以下几个原因:

1、不是所有设备和操作系统都支持通过USB进行远程调试

2、不同浏览器的远程调试方法不同,且支持程度不一致,导致远程调试相对复杂

3、不支持WebView(这条就足够使得我们放弃)

各厂商的remote debugging支持情况如下表概述:(部分数据不全)

序号 浏览器 说明 功能支持 基本原理
1 Opera 最早支持remote debugging 断点

HTML|CSS处理

Console1、内置调试功能

2、桌面建立server

3、基于Scope传输协议进行通信(json结构)2Chrome/webkit1Andorid 4.0+才支持,iOS6.0将支持,blackberry TabletOS支持

2、通过chromeremote-debugging-port参数启动断点

HTML|CSS处理

Console1、内置调试功能

2chrome启动socket server

3json格式通信3Firefox1、通过firebug插件Crossfire处理

2FF15后支持新特性断点

Console

 新协议可以通过互联网进行数据通信4IE1Crossfile for ie

2Gotcha断点

Console文档较少

虽然不能直接使用浏览器的remote debugging模式,但是浏览器在这方面做的努力却是我们可以学习和参考的。即可以通过通用的调试模式来进行处理:

1、移动终端浏览器(或页面)内置调试功能

2、建立Server,为终端和PC调试端提供数据通讯协议

3PC调试端进行前端展示和命令输出

基本流程如下图:


通过这个调试模式能做什么,完全取决于JavaScriptServer的能力。即JavaScriptServer能做什么,我们就可以通过桌面远程调试终端页面的什么。从下图各自的能力来看,实现我们主流的功能是完全不是问题,只要将JavaScript的能力通过Server来透传即可。

功能 JavaScript Server
断点 No No
HTML|CSS在线处理 Yes No
Console Yes No
文件读取 No Yes

PC调试端的前端表现这里可以复用已有的UI和模式,FirebugLiteChromeInspector都是很不错的选择。这里可以直接复用Weinre这个工具的实现(这个工具目前在业内已经有较大范围使用,朋友网yuni目前也是用的这个工具)。

Weinre的相关说明:http://blog.csdn.net/dojotoolkit/article/details/6280924
我也转过yuni的邮件给大家,这里就不赘述了,效果很不错,强力推荐大家使用下,然后整合到我们的研发流程和NoHost里。

但是,还有一个很重要的问题,根据上面JavaScriptServer能力的分布,我们发现断点调试还没实现!
这个无法实现么?

五、远程调试如何实现JavaScript断点(breakpoint)调试?

经过分析和学习,发现这个功能已经有牛人(Aleksander Kmetec)实现了,这里就直接给出他的实现原理和方法。

原理:

将请求的所有外链JavaScript进行重写,使其结合移动端JavaScript可以实现按行执行。

举例:

1、浏览器第一个加载调试控制的JS(这里是:https://github.com/lexandera/Aardwolf/blob/master/js/aardwolf.js

2、后续请求的所有外链JS都会被按照一定的规则重写,eg

  
1  

     2  var $number1;

     3  var $number2;


    

     7  $(function() {

     8      /* Locate number input fields */

     9      $number1 = $(‘#number1’);

    10      $number2 = $(‘#number2’);

    11      $number3 = $(‘#number3’);

    12      $result = $(‘#result’);

    13

    14      $(‘#calculate’).click(calculate);

    15      $(‘#reset’).click(reset);

    16  });

    var __this = this;try { Aardwolf.pushStack(“<toplevel>”, “/calc.js”, ‘0’); var aardwolfEvalFunc = function(aardwolfEval) { return eval(aardwolfEval); };

Aardwolf.updatePosition(“/calc.js”, 2, false, aardwolfEvalFunc);var $number1;

Aardwolf.updatePosition(“/calc.js”, 3, false, aardwolfEvalFunc);var $number2;

Aardwolf.updatePosition(“/calc.js”, 7, false, aardwolfEvalFunc);$(function() {var __this = this;try { Aardwolf.pushStack(“<anonymous>”, “/calc.js”, ‘7’); var aardwolfEvalFunc = function(aardwolfEval) { return eval(aardwolfEval); };

/* Locate number input fields */

Aardwolf.updatePosition(“/calc.js”, 9, false, aardwolfEvalFunc);$number1 = $(‘#number1’);

Aardwolf.updatePosition(“/calc.js”, 10, false, aardwolfEvalFunc);$number2 = $(‘#number2’);

Aardwolf.updatePosition(“/calc.js”, 11, false, aardwolfEvalFunc);$number3 = $(‘#number3’);

Aardwolf.updatePosition(“/calc.js”, 12, false, aardwolfEvalFunc);$result = $(‘#result’);

 

Aardwolf.updatePosition(“/calc.js”, 14, false, aardwolfEvalFunc);$(‘#calculate’).click(calculate);

Aardwolf.updatePosition(“/calc.js”, 15, false, aardwolfEvalFunc);$(‘#reset’).click(reset);

} catch (aardwolfEx) { if (!aardwolfEx.rethrown) { Aardwolf.reportException(aardwolfEx); } aardwolfEx.rethrown = true; throw aardwolfEx;} finally { Aardwolf.popStack();}});

3、执行每行代码的时候,Aardwolf都会判断目前是否是被设置成了断点,是否有代码需要执行。

4、最核心的是Aardwolf.updatePosition函数,记录了文件名,原始行号,是否设置debugger,闭包等基本信息,为后续做断点和调试做准备。

5、通过上一节提到的Server中转的方式,在收到新的断点和console的时候,Aardwolf.updatePosition可以第一时间介入,且不需要重新拉取任何文件。

OK,基于纯JavaScript和纯Server的都不能实现断点调试,而把两者结合就刚刚好可以完成,想法很棒。原理搞清楚了,那么对我们来说也就没什么困难的了,复用Aardwolf的逻辑整合到我们的NoHost系统即可。

六、NoHost对移动终端调试的意义和方法探讨

序号 功能 工具
1 测试环境配置 NoHost
2 DOM节点,样式校正,Console NoHost+类weinre
3 网络抓包 NoHost+Replay
4 文件替换 NoHost+多套环境

或NoHost+配置系统5脚本调试NoHost+类Aardwolf6性能检查NoHost+phantomJS+YSlow

NoHost和NodeJS时代来临了,不是么?

参考内容:

1HTML5终端支持情况:http://mobilehtml5.org/
2、手机浏览器HTML5支持情况调查:http://www.williamlong.info/archives/3075.html

3、用 DeviceAnywhere 远程测试移动设备:http://www.infoq.com/cn/vendorcontent/show.action?vcr=998

4、Web移动应用调试工具——Weinre:http://blog.csdn.net/dojotoolkit/article/details/6280924

5、WebKit Remote Debugging:https://www.webkit.org/blog/1620/webkit-remote-debugging/

6、weinre – Running:http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

7、Remote Debugging in Firefox Mobile:http://lucasr.org/2012/03/28/remote-debugging-in-firefox-mobile/

8、aardwolf介绍:http://lexandera.com/aardwolf/

9、aardwolf在Github:https://github.com/lexandera/Aardwolf

: http://www.webryan.net/2013/04/talk-about-remote-debugging-on-mobile-phone/

本文相关评论 - 才 11 条评论
2013-11-14 21:47:20

[…] 随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决。然而对于一些特殊情况仍然无法享受到浏览器的强大调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具)、非正常浏览器web、移动场景下的内嵌等场景。 基于这个场景我们团队已经在nohost下引入了weinre,并得到了广泛的使用。 但是weinre是有一定的局限性,只能做到console.log和DOM查看等,不能支持断点调试。这里之前老文章已经有过一些描述,可参见http://www.webryan.net/2013/04/talk-about-remote-debugging-on-mobile-phone/。 […]

2013-11-16 02:58:22

[…] 随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决。然而对于一些特殊情况仍然无法享受到浏览器的强大调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具)、非正常浏览器web、移动场景下的内嵌等场景。 基于这个场景我们团队已经在nohost下引入了weinre,并得到了广泛的使用。 但是weinre是有一定的局限性,只能做到console.log和DOM查看等,不能支持断点调试。这里之前老文章已经有过一些描述,可参见 http://www.webryan.net/2013/04/talk-about-remote-debugging-on-mobile-phone/。 […]

soonco
2014-03-19 21:41:51

我现在也在搞自己的nohost系统,大体思路是通过无线路由的代理功能把请求代理到我家的机子上,然后的我的机子上通过客户端不同的ip设置哪些域名需要代理,不过发现实现起来好麻烦~

还有一个想法是无线路由指定一台dns服务器,dns服务器根据不同客户ip可以灵活配置host~(不知道有没有这类软件)

ps:无线路由系统为openwrt(用的水星神器~),pc为ubuntu(虚拟机)+ nginx

能交流下么?

qq:4748950

[回复]

ryan 回复:

首先你搞nohost希望解决的问题是什么? 做开发调试还是做hosts切换,还是什么?
代理可以实现部分功能。 比如你把手机 or PC的HTTP代理服务器设置成你的本地IP端口(本地需要开启一个代理服务器即可),这样所有的HTTP请求都会走你的代理服务器,你可以在代理服务器上做任何你想做的事情,比如请求转发,截断修改等等,

[回复]

2014-03-23 19:35:53

首先你搞nohost希望解决的问题是什么? 做开发调试还是做hosts切换,还是什么?
代理可以实现部分功能。 比如你把手机 or PC的HTTP代理服务器设置成你的本地IP端口(本地需要开启一个代理服务器即可),这样所有的HTTP请求都会走你的代理服务器,你可以在代理服务器上做任何你想做的事情,比如请求转发,截断修改等等,

[回复]

soonco
2014-03-30 01:57:43

主要还是想搞个自动版(不用终端设备配代理或host)且能集中管理的服务器版fiddler

不过难度太大。。。现在搞了个可配置的dns服务器玩~勉强能达到要求。。。就是没法做url map~

[回复]

soonco
2014-05-21 00:04:45

目前折腾了个刷openwrt的路由,编译了个nodejs,上面跑了个可以配置的dnsproxy,根据ip(mac)方便切换不同服务器切换开发调试,不过每次切换需要重新连一下wifi(清dns缓存),功能比较简单,但是基本上能完成目前的需求

下一步打算在这个路由上跑一个根据ip(mac)方便切换不同代理服务器的程序(说白了就是傻瓜界面配置的iptables功能),通过统一的网页程序配置管理不同项目的开发调试,第一步先简单对接fiddler charles burp,后面也打算做一个replay系统,不过势单利薄有时间再说

[回复]

2014-09-20 16:56:36

google plus android apps…

关于移动终端上的Web前端调试方法探讨 | Ryan’s Blog (郭亨的博客)…

2014-09-25 18:06:01

Rose Quartz…

关于移动终端上的Web前端调试方法探讨 | Ryan’s Blog (郭亨的博客)…

2014-10-07 20:21:17

this is the lowercase game title hack direct download…

关于移动终端上的Web前端调试方法探讨 | Ryan’s Blog (郭亨的博客)…

2014-11-30 17:47:30

[…] 随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决。然而对于一些特殊情况仍然无法享受到浏览器的强大调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具)、非正常浏览器web、移动场景下的内嵌等场景。 基于这个场景我们团队已经在nohost下引入了weinre,并得到了广泛的使用。 但是weinre是有一定的局限性,只能做到console.log和DOM查看等,不能支持断点调试。这里之前老文章已经有过一些描述,可参见http://www.webryan.net/2013/04/talk-about-remote-debugging-on-mobile-phone/。 […]

2015-12-26 11:57:41

[…] 为了突破限制,才华横溢的前(xian)辈(lie)们已经做了各种 不同的尝试,解决了不同场景下的开发痛点,但都难以达到使用桌面版Chrome中原生开发者工具远程调试移动版Chrome内页面的体验(资源全局搜索、命令行交互等)。 […]