weinre使用

lyd2004888

　　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=&quot;http://192.168.36.101:8081/target/target-script-min.js#anonymous&quot; type=&quot;text/javascript&quot;>　　
</script>
　　

　　添加后在移动设备中访问该页面即可。以上192.168.36.101是你电脑的局域网IP地址。注意替换。
　　如果被测试的页面我们无法改变其代码，那么还可以使用下面的第二种方法，添加书签。
　　2、Target Bookmarklet
　　
该方法是将一段js保存到移动设备的书签中，可以在 刚才打开的http://localhost:8081/ 找到这段js：
　　

javascript:(function(e){e.setAttribute(&quot;src&quot;,&quot;http://192.168.36.101:8081/target/target-script-min.js#anonymous&quot;);document.getElementsByTagName(&quot;body&quot;)[0].appendChild(e);})(document.createElement(&quot;script&quot;));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