Web移动应用调试工具——Weinre



Weinre是什么？

Weinre代表We b In spector Re mote，是一种远程调试工具。举个例子，在电脑上可以即时 的更改手机上对应网页的页面元素、样式表，或是查看Javascript变量，同时还可以看到手机上页面的错误和警告信息. 下图所示中的例子，通过在console中运行“document.body.style.backgroundcolor = 'green';” 即时改变了手机上网页的背景色。

本调试方式需要wifi环境和webkit浏览器。

weiner主页：http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

一、配置调试服务器

（一）、nodejs搭建调试服务器（以windows为例）
1、安装node.js
安装程序下载：http://nodejs.org/#download
本文安装在“F:/nodejs/”目录。

2、测试安装是否成功
打开CMD，切换到nodejs所在的安装目录。输入如下命令测试node.js和npm是否安装成功。默认windows最新安装包，会包含npm，如果npm没有安装，请手动安装。

1

2

3

4

5

6

C:\Users\jason>f:

F:\>cdnodejs

F:\nodejs>node -v

v0.10.0

F:\nodejs>npm -v

1.2.14

3、使用npm安装weinre,在node.js安装目录输入以下命令

1

npminstallweinre

4、启动weinre服务器

1

node.exe node_modules\weinre\weinre --boundHost -all-

在windows下，系统防火墙可能会弹出是否允许其访问网络的提示，点击充许即可。

5、浏览器打开

http://localhost:8080

如果访问正常，说明服务器已配置成功。

（二）、直接使用phoneGap的调试服务器
如果觉得服务器配置麻烦，也可以使用phoneGap现成的调试服务器。
phoneGap调试服务器地址：http://debug.phonegap.com/（相当于本机安装的http://localhost:8080）

二、weinre使用方法
1、需调试的页面加入JS脚本
如：

1

<scriptsrc="http://你的调试服务器地址/target/target-script-min.js#anonymous"></script>

1.1使用收获夹快速添加调试脚本到需要调试的页面。
将以下代码添加到书签，访问需要调试的页面时，访问一下书签，即可以通过JS将调试脚本添加到当前页面，但部份浏览器不支持！

1

javascript:(function(e){e.setAttribute("src","http://你的调试服务器地址/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

2、在PC端使用webkit浏览器打开控制台

http://10.18.252.111:8080/client/#anonymous

#后面为识别码

tips：识别码仅仅是为了识别多个需调试的项目时使用，可供多用户操作。

解压下载后的weinre-jar-1.6.1.zip文件后，你可以得到weinre.jar文件。第一步是启动weinre调试服务器。命令如 下。其中192.168.43.149是运行weinre机器的ip地址，通常就是调试人员机器的地址。默认情况下weinre使用端口8080。如果你 希望修改端口号，可以使用–httpPort参数指定定制端口。

 --boundHost 192.168.1.105

开启 dubug      -dubug true

js只能查看变量，不能调试，在控制太直接输入变量名，或者代码可运行js