admin 管理员组文章数量: 887017
现在、将来，用移动设备上网越来越成为主流。但对于开发者们来说，移动web的调试一直是个难题，前期可以使用模拟器来协助调试，但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。
Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等，下面就简单介绍下如何使用。下面以以Windows系统为例：
一、首先确保你的电脑已经搭建好了java环境。即：安装了jdk。这里就不多说了，在网上搜个jdk，一步步安装及ok。
二、安装及运行Weinre
1、下载：http://ishare.iask.sina/f/23607399.html ，这里直接下载jar包，下载好之后放在一个文件夹里就行不需任何处理。
2、运行cmd，在weinre所在文件夹的地址栏输入代码：java -jar weinre.jar --httpPort 8081 --boundHost -all- （如下图）：
3、回车后会出现相应信息(注意：在调试过程中不要关闭cmd)：
4、打开本地浏览器，（使用webkit内核浏览器(chrome、safari)）访问 http://localhost:8081/，不出意外的话可以看到weinre的基本信息。
5、上图中的"debug client user interface"是weinre的Debug客户端，点击进入后可以看到目前还没有被测试的目标网页。
三、添加Debug Target
为了让需要调试的页面被weinre检测到，需要添加Debug Target，有两种方法：
1、Target Script
该方法需要在调试的页面中增加一个js：
<script src="http://192.168.0.106:8081/target/target-script-min.js#anonymous" type="text/javascript"> </script>
添加后在移动设备中访问该页面即可，如果调试的页面比较少可以使用这个方法，如果多的话推荐第二种方法
2、Target Bookmarklet
该方法是将一段js保存到移动设备的书签中，可以在 http://localhost:8081/ 找到这段js：
javascript:(function(e){e.setAttribute("src","http://localhost:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
我将这段js保存到名为Debug书签中，然后使用移动设备访问我想要调试的页面，比如说 http://iinterest，最后点击Debug书签就OK了。
四、真机调试。
1、 移动设备须有有wifi无线连接，且和电脑在同一网段，（确保本机安装了服务器，可以到网上搜xampp或wamp，）把要调试的页面放在服务器中相应的文件夹中,我安装的是xampp,所以放在htdocs目录下。在手机的页面中打开本页面的地址，如：http://192.168.0.102/index.html 。回到http://localhost:8081页面，点击“debug client user interface:”链接进入weinre的Debug界面，如果成功添加了Debug Target，这里可以看到它。
2、接下来我们就可用自己熟悉的方式调试页面了，并且调试结果会实时显示在移动设备上
MAC系统更为简单，不用命令行，直接运行app即可启动weinre，接下来的步骤和windows一样。
参考：http://www.iinterest/2012/02/08/debugging-mobile-web-applications-with-the-weinre/
版权声明：本文标题：Mobile Web调试工具Weinre 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729143297h1323229.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论