手机终端网页调试程序使用说明

 

(按照本文最后总结部分所述进行操作可以快速抓住要领，学会使用)

一、调试核心程序weinre简介

Weinre是一种远程调试工具，即可以在电脑上调试手机上的页面。调试界面和webkit内核浏览器(chrome、safari等)调试界面很相似，熟悉webkit内核浏览器的开发人员很容易上手使用。

二、weinre的下载、安装及使用

1、Weinre的下载地址如下：（需要java环境支持）

http://pan.baidu.com/netdisk/singlepublic?fid=902768_1583634639（weinre.jar）

2、下载weinre.jar后，将其放在你自己选择的目录。这里为方便说明，放在D盘根目录下面

3、打开cmd，定位到weinre.jar所在目录，这里是D盘

4、输入java -jar weinre.jar --httpPort 8088 --boundHost -all-返回如下信息，则weinre成功开启

5、打开http://localhost:8088，则打开weinre主页

6、打开http://localhost:8088/client/#anonymous则进入调试监控页面，这个页面就是我们需要用到的远程调试页面（熟悉chrome等浏览器的开发人员很容易上手）

至此，weinre部分介绍完毕。更多关于weinre的参考资料如下：

http://www.iinterest.net/2012/02/08/debugging-mobile-web-applications-with-the-weinre/

http://blog.csdn.net/dojotoolkit/article/details/6280924

三、连接weinre入口程序cheat.js介绍

为方便用户使用weinre调试程序，本人制作weinre入口程序cheat.js，方便开发人员进行远程调试。

Cheat.js下载地址：

https://tc-svn.tencent.com/isd/isd_snsapp_rep/web_proj/trunk/build/snsapp/debug/cheat.js（需要svn权限）或者

http://pan.baidu.com/netdisk/singlepublic?fid=903571_3362738424（网盘下载）

 

四、入口程序cheat.js使用说明

1、下载的js文件加载到需要进行远程调试的手机页面。

比如：http://qzs.qq.com/snsapp/app/bee/mobile/index.html?uin=462938286&mod=subscribe该程序需要进行远程调试，则在head头部嵌入cheat.js文件

2、激活远程调试入口界面

激活方式：请在间隔不超过2秒的时间内，分别依次在屏幕上3手指触摸，4手指触摸，5手指触摸

按上述激活方式操作后，可以成功看到如下界面：

 

在输入框输入weinre所在服务器的IP地址即可开启手机页面与weinre的连接。

然后在PC端输入http://[weinre所在服务器的IP地址]:8088/client/#anonymous即可远程调试

五、总结

1、weinre服务成功开启（也就是完成到第二大步，第四小步的工作）

2、cheat.js加载到需要调试的手机页面中

3、在该手机页面中操作激活秘籍（3手触摸，4手触摸，5手触摸）

4、在激活入口页面输入weinre所在服务器的IP地址

5、在PC端输入http://[weinre所在服务器的IP地址]:8088/client/#anonymous

 

 

 

 

 

第二种方法

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

　　二、安装及运行Weinre

　　　　1、下载：http://ishare.iask.sina.com.cn/f/23607399.html  ，这里直接下载jar包，下载好之后放在一个文件夹里就行不需任何处理。
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

　　　　 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.net，最后点击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一样。