移动端调试工具-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地址和端口号。
默认情况是:localhost:8080.
你可以设置成自己电脑上的ip地址和任意没有使用的端口号。
使用此命令启动weinre:weinre --boundHost ip --httpPort 端口号
后面的步骤,跟上面的方式是一样的。
此方法,在chrome和safari中都可以使用。
注意:如果在调试页面中,没有显示完整页面上的元素,请刷新一下网页,然后选择那个链接,最后再点击element,就可以看到页面上完整的元素了。
虽然使用weinre进行调试时,会有突然断开,有时需要刷新多次才能连上,有时需要重新安装才能连上等一系列的问题,但是没有它,你根本无法进行页面调试。期待它的改进,然后希望博友能够推荐更好的调试工具,当然你必须知道怎么使用,才推荐。
加油!