使用weinre调试Web应用及PhoneGap应用

Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试，包括针对JavaScript，DOM元素和CSS样式的调试。但是，当我们期望为移动Web站点或应用进行调试时，这些工具就很难派上用场。

weinre就是一个帮助我们在桌面来远程调试运行在移动设备浏览器内的Web页面或应用的调试工具。weinre是WEb INspector REmote的简写。本文将介绍weinre的基本使用方法，包括下载、安装、如何使用，以及使用weinre来调试phoneGap应用。

关于Adobe Inspect

weinre非常方便，目前来说是针对移动设备进行远程调试的最佳工具，但在进行真正的跨平台移动web应用开发时，通常开发者要面对多个不同型号的移动设备，此时要使用weinre同时同步在所有设备上进行调试就是一个非常费时费力的事情，
在Adobe创意云平台上，提供了免费的针对多移动设备间同步测试的工具Adobe Inspect，你可以注册并免费下载。

Adobe Shadow

在Adobe推出了最新的创意云服务，在这个服务平台上用户可以下载最新的Adobe工具，最棒的是可以免费获取主动Adobe刚刚推出的实验版软 件，包括HTML5动画制作工具Adobe Edge Animate，HTML5编程工具Adobe Edge Code，以及移动平台测试软件Edge Inspect等。在这里可以免费注册：http://t.cn/zYOZYTb ，在此可以登录获取：http://t.cn/zYOZjxH。

下载

下载地址：https://github.com/callback/callback-weinre/archives/master,如下图：

下载weinre

weinre提供了两种下载，一种是.jar文件，另一种是mac可安装文件。本文中将主要以.jar文件为例。如果你使用了mac电脑，那么可以选择mac安装文件方式，运行weinre应用后，如下图：

在mac上运行的weinre应用

weinre的基本概念

在使用weinre之前，需要先了解一下weinre的基本概念。

使用weinre的目的是调试运行在移动设备浏览器内的web站点或应用，我们称这个移动设备即为“调试目标（Debug Target）”。由于在移动设备上直接进行调试操作不便，weinre帮助我们使用桌面传统的webkit环境（比如Web Inspector或者Google Chrome的开发者工具）来进行调试，我们称这个桌面调试环境为“调试客户端(Debug Client)”。weinre为了能够同步桌面的调试客户端和移动设备上的调试目标，需要你搭建一个“调试服务器(Debug Server)”。

因此，在使用weinre进行远程设备调试时，包含了之上的三种元素：

  • 调试服务器：调试服务器起到代理的作用，用来同步调试目标和调试客户端之间的命令
  • 调试客户端：通常为桌面调试环境，即开发者实际操作调试的地方
  • 调试目标：运行被调试web内容的移动设备

weinre的调试目标和客户端都运行在浏览器中，而调试服务器则以HTTP服务器方式作为二者的中介运行。在Patrick Mueller关于weinre的手册中，解释了这种关系。更详细的解释可见：http://muellerware.org/papers/weinre/manual.html

weinre的组成

启动调试服务器

解压下载后的weinre-jar-1.6.1.zip文件后，你可以得到weinre.jar文件。第一步是启动weinre调试服务器。命令如 下。其中192.168.43.149是运行weinre机器的ip地址，通常就是调试人员机器的地址。默认情况下weinre使用端口8080。如果你 希望修改端口号，可以使用–httpPort参数指定定制端口。

java -jar weinre.jar --boundHost 192.168.43.149

成功启动weinre后的输出结果如下：

此时，打开webkit引擎浏览器，比如Chrome，输入url：http://192.168.43.149:8080，可以看到weinre已经启动。我们现在打开的这个浏览器窗口就是weinre的调试服务器主页。如下图：

weinre调试服务器主页

调试移动Web应用

现在在桌面启动调试客户端。如weinre调试服务器主页上所描述，即打开Chrome浏览器，输入debug client user interface地址（调试客户端UI地址）。本例中即：http://192.168.43.149:8080/client /#anonymous，其中#anonymous是默认的调试id（debug id）。如果这个weinre调试服务器只是由你一个人使用，那么你可以使用默认的debug id：anonymous。

启动的weinre调试客户端ui如下图：

weinre调试客户端UI


目前，我们还没有连接任何调试目标（通常即移动设备）到调试服务器，因此上图中，targets下显示为none。

下面，我们在移动设备上运行我们要测试的web页面，并开始利用调试客户端进行调试。要进行测试的web站点或者应用可以部署在任何一台服务器上，不需要 一定与weinre服务器运行在一起。为了能够在web站点上激活weinre调试，需要在页面中加入如下script脚本。在本例 中，xxx.xxx.xxx.xxx：8080为weinre调试服务器的地址和端口号。这样，页面运行target-script-min.js时，能 够连接weinre服务器，进而实现远程调试。

现在，我们在移动设备上打开浏览器，运行我们将要调试的应用，如下图：

运行在移动设备浏览器中的web应用

此时，如果查看桌面浏览器内的weinre调试客户端，应该可以看到weinre已经检测到targets，如下图：

weinre检测到target

现在，使用调试客户端的element，resource，network，timeline和console功能，就可以在桌面上远程针对移动设备上浏 览器内运行的web应用进行调试了，使用的方法和Chrome的开发者工具相同。比如选择DOM元素，调整样式值或者dom值，检测网络数据，甚至在 console中远程运行js脚本。当在移动设备上操作被调试的web内容时，weinre会自动更新调试客户端中的内容，比如element面板中的 dom树。
目前为止，使用weinre还无法针对script进行调试，比如设置断点。
下图显示了使用element面板来选择一个DOM元素时，在移动设备上同时高亮该元素的情况。

调试PhoneGap应用

PhoneGap应用实际上就是运行在移动设备webview中（Android:webview，IOS:uiwebview）的web应用，因此只需要在要调试的web应用页面中加入weinre脚本即可。

如果你不愿意自己搭建weinre服务器，那么你可以考虑使用phoneGap提供的在线weinre调试服务器，地址 为：debug.phonegap.com，如下。可以看到，你只需要提供debug id，然后在你将要调试的web应用或站点页面中加入对应的weinre script,其中要使用phonegap debug服务器的端口和地址，之后运行其客户端即可。

PhoneGap调试服务器

资料

Update:
上述Github地址已经失效，新的地址在 http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/ 和 https://github.com/pmuellr/weinre

posted @ 2013-07-20 11:23  郑文亮  阅读(1252)  评论(0)  编辑  收藏  举报