Weinre - 远程调试工具

          Weinre  代表Web Inspector Remote，是一种远程调试工具。借助于网络，可以在PC上直接调试运行在移动设备上的远程页面，中文意思是远程Web检查器，有了Weinre，在PC上可以即时修改目标网页的HTML/CSS/Javascript，调试过程可实时显示移动设备上页面的预览效果，并同步显示设备页面的错误和警告信息，可以查看网络资源的信息，不过weinre不支持断点调试。该项目目前是 Apache Cordova 的一部分。

    

     运行原理如下：

　　  Weinre作为一种远程调试工具，在结构上分为三层：

• 目标页面（target）：被调试的页面，页面已嵌入weinre的远程js，下文会介绍；

• Debug客户端（client）：本地的Web Inspector调试客户端；

• Debug服务端（agent）：一个HTTP Server，为目标页面与Debug客户端建立通信。

    

          获取Weinre （nodejs ）

在任何的支持 Node.js 环境的系统下通过包管理器（npm）即可安装Weinre

npm install -g weinre

使用Weinre进行远程调试

1 启动 WeinreDe bug 服务端

     

weinre --httpPort 8080 --boundHost 192.168.1.30

 

2. 通过PC浏览器（WebKit内核）打开 WeinreDe bug 客户端

 

     浏览器打开： http://localhost[Your IP]:8080

 

         

3 在你需要调试的页面加上通信用的脚本

     

<script src="http://wp:8900/target/target-script-min.js#anonymous"></script>

 

4 在手机上访问你的测试页面，在电脑上进入到 WeinreDe bug 客户端 看是否通信成功，如果一切没问题，可见到如下的页面

 

     手机浏览器打开： http://localhost[Your IP]:8080/client/#anonymous

          

         

 

          5. 接下来我们就可用自己熟悉的方式调试页面了，并且调试结果会实时显示在移动设备上

 

 

---

 

　　使用Java版的 weinre

 

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

　　二、安装及运行Weinre

　　　　 1、下载：http://ishare.iask.sina.com.cn/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://baidu.com，最后点击Debug书签就OK了。