weinre使用
2016-01-21 17:56
232 查看
2016-1-21 更新说明:
Web应用开发者需要针对手机进行界面的调试,但是手机上并没有称心如意的调试工具(如Firebug),调试界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。本文以Windows系统为例:
例如,js出问题了,使用Console查看便知;页面css有问题,通过审查元素即可定位元素。
但是,当我们在移动端测试h5页面,当出现问题,该怎么查看?明明在电脑上访问是正常的,到手机里就不正常了。哪里出问题了?怎么追踪?都是个难题。
weinre就为我们提供了诸如Elements、Network、Console等功能调试,你在手机上点击的任何一个链接,发出的任何一次请求,weinre都可以捕捉,并以我们熟悉的Console控制台方式显示。甚至,我们在控制台里点击页面的某个标签,在手机都会以选中的形式告知我们,当前这个标签对应的页面的哪一块。
Weinre的本意是
举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素、样式表,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息。
weinre没有安装包,不会像普通程序那样有界面,他依赖命令行和浏览器。
weinre本身是个jar包。我们需要下载这个文件:
由于不大好下载,这里列出下载地址:
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
下载下来,解压到某个目录,例如
解压后是个
提示:
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[/code] 说明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
相关文章推荐
- python学习------------异常以及反射
- jquery 给table里的td动态创建控件并处理
- 通讯协议序列化
- 用python实现的抓取腾讯视频所有电影的爬虫
- NSString / NSMutableString 字符串处理,常用代码 (实例)
- java中对cookie的读写操作
- Django 中自定义 tag 如何获取变量参数的值
- ZFS -世界上最高级的文件系统之一
- hdu-5082
- 数组与指针的区别
- 转:PHP Composer 管理工具的介绍 这个相对清晰点
- (转)META http-equiv="refresh" 实现网页自动跳转
- JavaScript对象
- Java中常用的锁分析总结
- leetcode19. Remove Nth Node From End of List
- android蓝牙遥控车
- vs2013 warning MSB8012 的问题解决
- 三维dem
- Java NIO使用及原理分析 (一)
- CentOS MySQL数据目录修改