Weinre《调试使用》调试Mobile Web

如今、未来，用移动设备上网愈来愈成为主流。但对于开发者们来讲，移动web的调试一直是个难题，前期能够使用模拟器来协助调试，但到了真机调试阶段就让人很是头痛。而Weinre就是解决这难题的利器。　

　　Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector相似，能够帮助咱们即时更改页面元素、样式，调试JS等，下面就简单介绍下如何使用。下面以以Windows系统为例：

　　1、首先确保你的电脑已经搭建好了java环境。即：安装了jdk。这里就很少说了，在网上搜个jdk，一步步安装及ok。

　　2、安装及运行Weinre

　　　　一、下载：http://ishare.iask.sina.com.cn/f/23607399.html  ，这里直接下载jar包，下载好以后放在一个文件夹里就行不需任何处理。

　　　　 二、运行cmd，在weinre所在文件夹的地址栏输入代码：java -jar weinre.jar --httpPort 8081 --boundHost -all-  （以下图）：

　　　　 三、回车后会出现相应信息(注意：在调试过程当中不要关闭cmd)：

　　　　四、打开本地浏览器，（使用webkit内核浏览器(chrome、safari)）访问http://localhost:8081/，不出意外的话能够看到weinre的基本信息。

　　　　五、上图中的"debug client user interface"是weinre的Debug客户端，点击进入后能够看到目前尚未被测试的目标网页。

　　3、添加Debug Target

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

           该方法须要在调试的页面中增长一个js：

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

　　　　添加后在移动设备中访问该页面便可，若是调试的页面比较少能够使用这个方法，若是多的话推荐第二种方法

　　　　二、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.net，最后点击Debug书签就OK了。

　　4、真机调试。

　　　一、　移动设备须有有wifi无线链接，且和电脑在同一网段，（确保本机安装了服务器，能够到网上搜xampp或wamp，）把要调试的页面放在服务器中相应的文件夹中,我安装的是xampp,因此放在htdocs目录下。在手机的页面中打开本页面的地址，如：http://192.168.0.102/index.html 。回到http://localhost:8081页面，点击“debug client user interface:”连接进入weinre的Debug界面，若是成功添加了Debug Target，这里能够看到它。

　　二、接下来咱们就可用本身熟悉的方式调试页面了，而且调试结果会实时显示在移动设备上

 

MAC系统更为简单，不用命令行，直接运行app便可启动weinre，接下来的步骤和windows同样。

【转载出处】【http://www.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html】