weinre使用

2016-1-21 更新说明：

微信web开发者工具已经集成了weinre，只需设置手机代理便可调试任意页面，更简单更方便，推荐使用！

Web应用开发者需要针对手机进行界面的调试，但是手机上并没有称心如意的调试工具（如Firebug），调试界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。本文以Windows系统为例：

为什么使用weinre

我们在调试web页面时，在PC端我们有Chrome控制台、FireBug这两款优秀的工具，让我们可以查看Elements、Network、Console等项，让本来复杂的前端变得简单而有趣。

例如，js出问题了，使用Console查看便知；页面css有问题，通过审查元素即可定位元素。

但是，当我们在移动端测试h5页面，当出现问题，该怎么查看？明明在电脑上访问是正常的，到手机里就不正常了。哪里出问题了？怎么追踪？都是个难题。

weinre就为我们提供了诸如Elements、Network、Console等功能调试，你在手机上点击的任何一个链接，发出的任何一次请求，weinre都可以捕捉，并以我们熟悉的Console控制台方式显示。甚至，我们在控制台里点击页面的某个标签，在手机都会以选中的形式告知我们，当前这个标签对应的页面的哪一块。

weinre是什么

引自网友的一段话：

Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等。

举个例子，在电脑上可以即时 的更改手机上对应网页的页面元素、样式表，或是查看Javascript变量，同时还可以看到手机上页面的错误和警告信息。

如何安装

首先确保你的电脑已经搭建好了java环境。即：安装了jdk。这里不多做说明。

weinre没有安装包，不会像普通程序那样有界面，他依赖命令行和浏览器。

weinre本身是个jar包。我们需要下载这个文件：weinre-jar-1.6.1.zip。

由于不大好下载，这里列出下载地址：

1、weinre unofficial binary packages for your convenience：

http://people.apache.org/~pmuellr/weinre/builds/1.x/1.6.1/

2、weinre1.6.1 - 下载频道 - CSDN.NET

http://download.csdn.net/detail/skyhh/4629366

下载下来，解压到某个目录，例如D:\weinre\。

解压后是个weinre.jar文件。

启动weinre

命令行下输入：

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

提示：

2016-01-21 16:41:27.185:INFO::jetty-7.x.y-SNAPSHOT
2016-01-21 16:41:27.292:INFO::Started SelectChannelConnector@0.0.0.0:8081
2016-01-21 16:41:27.293:INFO:weinre:HTTP server started at http://localhost:8081

说明weinre已经在正常运行。httpPort为端口，大家可自行更改。运行weinre.jar后，命令行要一直开着，可以写一个bat文件，需要的时候，执行bat就可以。

在浏览器（使用webkit内核浏览器，如chrome）输入：http://localhost:8081，即可看到weinre的基本信息。

上图中的debug client user interface是weinre的Debug客户端，点击进入后可以看到目前还没有被测试的目标网页。

移动端调试

为了让需要调试的页面被weinre检测到，需要添加Debug Target，有两种方法：

1、Target Script

该方法需要在调试的页面的header标签中增加一个js：

<script src="http://192.168.36.101:8081/target/target-script-min.js#anonymous" type="text/javascript">
</script>

添加后在移动设备中访问该页面即可。以上192.168.36.101是你电脑的局域网IP地址。注意替换。

如果被测试的页面我们无法改变其代码，那么还可以使用下面的第二种方法，添加书签。

2、Target Bookmarklet

该方法是将一段js保存到移动设备的书签中，可以在 刚才打开的http://localhost:8081/ 找到这段js：

javascript:(function(e){e.setAttribute("src","http://192.168.36.101:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

将这段js保存到名为Debug书签中，然后使用移动设备访问我想要调试的页面，比如说 http://baidu.com，最后点击Debug书签就OK了。

但是目前手机上好多浏览器已经不支持添加这样格式的书签了，会提示无效。

出现问题

目前发现打开debug client user interface页面空白，控制台显示js错误，暂时无解决方案。暂时搁置。推荐使用微信web开发者工具方案代替。

参考：

1、Mobile Web调试工具Weinre - 挨踢前端 - 博客园

http://www.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html

2、Web移动应用调试工具——Weinre - Dojo中文博客 - 博客频道 - CSDN.NET

http://blog.csdn.net/dojotoolkit/article/details/6280924