介绍两种移动设备调试方案

移动互联网发展势头强劲,掌握移动端的调试非常有必要,我们这次来谈谈移动端的调试。

大约2013年,在一次分享会上,了解到OS X下,Safari可以远程调试iOS设备的网页,只是在那之后很少涉及移动端WEB开发,也就没怎么关注。

2个月前,入职新公司,为移动端WEB开发做准备,尝试了WEINRE的使用。

今天,再次pick起这个话题,google之。大体上有以下几种方案:

  1. OS X Safari(>=6.0)远程调试ios设备中safari中的网页
  2. OS X/Windows Chrome 远程调试 android设备中chrome网页以及webview中的网页
  3. weinre跨平台调试
  4. Adobe Shadow 跨平台测试(基于weinre封装,更加便捷,更加强大)
    方案1和方案3是我实践过的,方案2由于手头没有合适的android设备,没有成功,方案4需要安装Adobe的客户端,一晚上没装成功。

所以,本次暂时只介绍方案1和方案3,另外两种,等实践过再补上。

一、OS X Safari远程调试iOS设备中safari中的网页

此方案,只能用于调试iOS平台Safari网页,并且要求OS X版本>=10.8,Safari版本>=6.0,这两个要求很容易达成。下面是步骤:

1.打开iOS设备,”设置”->”Safari”->”高级”->开启”Web 检查器”,如图:

2.在OS X上打开Safari->”偏好设置”->”高级”->开启”在菜单栏中显示“开发”菜单”,如图:

3.将你的iOS设备用USB连接到你的OS X电脑

4.在iOS设备中打开Safari(我这里以iPad为例),访问需要被调试的页面,比如https://www.google.com

5.在OS X中的Safari菜单->”开发”->选择你的iOS设备,将自动列出其打开的网页,选择google那一项,如图:

OS X这边会弹出这样一个子窗口,你可以像调试本地网页那样调试iOS设备中的网页,除了在本机上没有网页的显示,其他几乎一样,可以javascript断点调试,可以改变css属性等一切本地调试时可以获取的信息。

下图为,在OS X中DOM节点审查界面选中了某一个元素,相应的iOS设备中的元素高亮显示,与调试本地网页一样。

下图为,在console执行了alert(‘OS X你好’),并修改了某个DOM文案的效果:

好了,以上就是使用OS X 的Safari调试iOS设备中Safari网页的步骤,步骤1和2是长期有效的,步骤3,4,5是每次调试过程需要做的。此调试功能非常强大,几乎与调试本地网页无异。网上据说可以调试iOS WEBVIEW中的页面,但我没试出来囧。

二、使用weinre跨平台调试无线设备中的网页

1.安装weinre

它可以通过npm安装:

1
npm -g install weinre

如果你是一名前端开发者,却不知道nodejs是什么,请自觉面壁。

2.获取你的机器局域网的IP,方式多多,比如ifconfig(OS X,LINUX),ipconfig(windows),OS X有个更加方便的办法,是最近一个同事告诉我的,顺便分享一下。按住option点击工具栏的无线网即可:

可以看到,我的局域网IP地址是192.168.1.108,或者你把自己机器网络设置为固定IP,这样就不用每次获取了。

3.打开终端,执行(根据我的IP是192.168.1.108,你需要替换之):

weinre –boundHost 192.168.1.108

然后,会立即返回如下信息:

2015-06-21T12:00:51.491Z weinre: starting server at http://192.168.1.108:8080

4.打开浏览器访问http://192.168.1.108:8080(同样与刚才的IP有关,你需要替换之),如图:

将图中红色框出的script标签拷贝至需要被调试的页面,这里的IP就是前面的IP

5.打开你的无线设备,用浏览器或者webview访问需要被调试的页面(即刚才添加了script标签的那个页面)。

6.回到电脑的浏览器,点击下图中的链接:

会看到

然后,切换到Elements面板,就可以看到实时的DOM结构了:

选中某个DOM节点,无线设备上同样会高亮同步显示,同样可以动态修改css样式,在console执行脚本,查看网络请求等。页面中的consoleAPI执行结果也会输出到这里。

步骤1是长期有效的,后面的每次调试过程都是要做的

这种方式的优点是,可以跨平台调试。

缺点是:

1.页面初始化阶段的console等信息无法输出到调试页面(调试系统也需要时间准备)

2.无法断点调试

这都是因为,其调试本身实现是基于web的方式websocket。

总结

以上为本次讨论的两种调试方案,我都成功实践过,是很靠谱的,特此分享,谢谢。

 

 

update:

后来试用过Adobe Shadow,结论是:不推荐。原因:

1.PC软件安装过程较繁琐,必须要安装Adobe的某个管理平台才可以安装Adobe Edge Inspect CC,而且似乎要翻墙

2.被测试设备必须安装相应的App才可用

3.必须安装PC上Chrome插件

3.测试时,只能在其App提供的WEBVIEW内访问被测试网页(虽然是自动随PC上Chrome同步),无法满足微信开发或者混合App开发

4.打开调试标签时,似乎需要向Adobe官方站点请求数据,导致打开调试页面非常之慢,而且好像也要翻墙

 

另外,推荐另一款移动设备测试工具 http://vanamco.com/ghostlab/ ,我稍稍试用了一下,感觉不错,正在考虑购买。