三、开发调试
最后更新于：2022-04-01 01:54:45
## （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）。
访问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，甚至是反向代理的操作。