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