三、开发调试

由 Cloud_sterife 创建, 最后一次修改 2016-02-24

(1) weinre远程实时调试

Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试,包括针对JavaScript,DOM元素和CSS样式的调试。但是,当我们期望为移动Web站点或应用进行调试时,这些工具就很难派上用场。

weinre就是一个帮助我们在桌面来远程调试运行在移动设备浏览器内的Web页面或应用的调试工具。weinre是WEb INspector REmote的简写,现在是Apache的一个开源项目,托管在github

下面将介绍如此在日常工作使用它。

首先,我们要下载weinre的jar包——项目官方已经找不到该jar文件,网上能够找到,这里建议搭建个独立的web服务器,jar运行后是一个本地的服务器,和web服务器差不多~~

然后通过运行dos命令来启动它(请注意在你的电脑上已经安装有JDK)。运行命令如下,需要把路径改成你的实际文件位置:

java -jar d:\tools\weinre-jar\weinre.jar –httpPort 8081 –boundHost -all- (httpPort是指定服务端口,boundHost参数说明可以使用IP访问,all参数代表支持所有的host)。

访问localhost:8081,如果看到如下的页面,说明weinre已经启动成功:

输入debug client user interface地址(调试客户端UI地址)。本例中即:http://localhost:8081/client/#anonymous,其中#anonymous是默认的调试id(debug id)。如果这个weinre调试服务器只是由你一个人使用,那么你可以使用默认的debug id:anonymous。 启动的weinre调试客户端ui如下图:

在需要调试的页面加入中以下脚本:,注意把localhost换成手机能够访问的真实IP地址。当手机访问这个页面时,weinre客户端就会检测到目标设备,然后就可以对它进行调试了。

因为手机上不方便截图,我这里就用两个浏览器窗口来展示效果,其实手机上的效果跟右边是一样的。

(2) AVD模拟器调试

静态页面并不能满足我们的需求,很多实际效果比如touch事件,滚动事件,键盘输入事件等,都需要在真实的环境下测试,这时就需要用到模拟器。就像我们测试ie6一样,AVD模拟器可以类比于PC上的虚拟机,当我们需要测试某一特定的机型时,我们可以新建一个AVD,进行一系列的测试。不过使用AVD的前提是已经部署好android的开发环境,这个需要JDK + android SDK + Eclipse + ADT,还是稍微有点繁琐。

(3)手机抓包与配host

在PC上,我们可以很方便地配host,但是手机上如何配host,这是一个问题。

这里主要使用fiddler和远程代理,实现手机配host的操作,具体操作如下:

  1. 首先,保证PC和移动设备在同一个局域网下;
  2. PC上开启fiddler,并在设置中勾选“allow remote computers to connect”
  3. 手机上设置代理,代理IP为PC的IP地址,端口为8888(这是fiddler的默认端口)。通常手机上可以直接设置代理,如果没有,可以去下载一个叫ProxyDroid的APP来实现代理的设置。
  4. 此时你会发现,用手机上网,走的其实是PC上的fiddler,所有的请求包都会在fiddler中列出来,配合willow使用,即可实现配host,甚至是反向代理的操作。
以上内容是否对您有帮助:

二维码
建议反馈
二维码