多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## (1) weinre远程实时调试 Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试,包括针对JavaScript,DOM元素和CSS样式的调试。但是,当我们期望为移动Web站点或应用进行调试时,这些工具就很难派上用场。 [weinre](http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html "weinre")就是一个帮助我们在桌面来远程调试运行在移动设备浏览器内的Web页面或应用的调试工具。weinre是WEb INspector REmote的简写,现在是Apache的一个开源项目,托管在[github](https://github.com/apache/incubator-cordova-weinre "weinre @ 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)。 ![](https://box.kancloud.cn/2015-08-02_55bd81426a303.jpg "1353414493_79") 访问localhost:8081,如果看到如下的页面,说明weinre已经启动成功: ![](https://box.kancloud.cn/2015-08-02_55bd8142cb30d.jpg "1353414592_76") 输入debug client user interface地址(调试客户端UI地址)。本例中即:http://localhost:8081/client/#anonymous,其中#anonymous是默认的调试id(debug id)。如果这个weinre调试服务器只是由你一个人使用,那么你可以使用默认的debug id:anonymous。 启动的weinre调试客户端ui如下图: ![](https://box.kancloud.cn/2015-08-02_55bd814325a09.jpg "1353414993_51") 在需要调试的页面加入中以下脚本:,注意把localhost换成手机能够访问的真实IP地址。当手机访问这个页面时,weinre客户端就会检测到目标设备,然后就可以对它进行调试了。 ![](https://box.kancloud.cn/2015-08-02_55bd81436985a.jpg "1353415314_42") 因为手机上不方便截图,我这里就用两个浏览器窗口来展示效果,其实手机上的效果跟右边是一样的。 ## (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” ![](https://box.kancloud.cn/2015-08-02_55bd8143d0d39.png "fiddler配置") 3. 手机上设置代理,代理IP为PC的IP地址,端口为8888(这是fiddler的默认端口)。通常手机上可以直接设置代理,如果没有,可以去下载一个叫ProxyDroid的APP来实现代理的设置。 4. 此时你会发现,用手机上网,走的其实是PC上的fiddler,所有的请求包都会在fiddler中列出来,配合willow使用,即可实现配host,甚至是反向代理的操作。