移动端调试工具-Weinre

java版本安装和调试

首先需要下载 weinre， weinre目前支持Windows与MacOS， 本文中以Windows版为例。

下载地址：http://people.apache.org/~pmuellr/weinre/builds/1.x/1.6.1/

点击weinre-jar-1.6.1.zip下载。

然后确保你的电脑已经搭建好了java环境。即安装了jdk。这里就不多说了，在网上搜个jdk，一步步安装及ok。

在下载的weinre.jar所在文件夹中运行以下命令：

java -jar weinre.jar --httpPort 8081 --boundHost -all-

这行命令会在本机上启动weinre的Debug服务端，端口为8081。打开Chrome或Safari，访问localhost:8081，就可以看到weinre的基本信息。

这里的端口号，你可以随意更改，我电脑上的8081端口不可用，所以我使用1070端口就可以。

由于此版本的weinre在chrome下有问题，因此只能使用safari才能打开。

打开之后，就会有一个"debug client user interface"，它是weinre的Debug客户端，点击进入后可以看到目前被测试的目标网页。

如何让我们的网页成为目标网页并且可以被localhost:8081上的weinre检测到呢？很简单，只要往网页面上添加一个js文件就可以了。如果本机的IP为192.168.0.5，那么就添加如下的js文件：

<script src="http://192.168.0.5:8081/target/target-script-min.js#anonymous"></script>

当你在移动设备上打开添加了这个脚本的网页后，你就可以在safari的Debug 的客户端的里检测到它了。

点击"debug client user interface"就进入到了调试页面。

之后我们就能在Elements与Console中调试移动端的页面了。

注意：如果看到targets下面为none，就刷新几次，就会出现了。

Weinre的新版本调试

第一种方法：

目前国外有提供PhoneGap的weinre的远程服务，用户可以访问下述网址使用户在线远程调试。

http://debug.build.phonegap.com/

把<script src="http://debug.build.phonegap.com/target/target-script-min.js#anonymous"></script>

这段代码，引入到你的移动端项目的html页面中就行了。但是这种方式，需要你的网速比较好，不然会有点慢。

第二种方式：

1. 首先保证你安装了nodejs环境，如果没有，先去https://nodejs.org/下载安装。

2. nodejs v0.10已经集成了npm，所以可以直接使用npm安装weinre，在cmd中敲：npm install weinre -g。

3. 安装完成后，你会在目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下看到weinre，这便是它的主目录了。

4. 在cmd中运行weinre --boundHost -all-，就会启动weinre服务。然后在浏览器中输入cmd中显示的地址：IP地址和端口号。

我这里是：http://10.18.221.16:1070

默认情况是：localhost:8080.

你可以设置成自己电脑上的ip地址和任意没有使用的端口号。

使用此命令启动weinre：weinre --boundHost ip --httpPort 端口号

后面的步骤，跟上面的方式是一样的。

此方法，在chrome和safari中都可以使用。

注意：如果在调试页面中，没有显示完整页面上的元素，请刷新一下网页，然后选择那个链接，最后再点击element，就可以看到页面上完整的元素了。

虽然使用weinre进行调试时，会有突然断开，有时需要刷新多次才能连上，有时需要重新安装才能连上等一系列的问题，但是没有它，你根本无法进行页面调试。期待它的改进，然后希望博友能够推荐更好的调试工具，当然你必须知道怎么使用，才推荐。

加油！