使用weinre真机调试移动web应用（转载）

只是保存一下大概，很多图片都没有，要看的去原地址看吧，转载自：

http://div.io/topic/1322

$ weinre --boundHost 192.168.1.1 --httpPort 8081

weinre 英文全称 WEb Inspector REmote。发音类似于‘winery’。

术语（Terminology）

当我们使用weinre时，会涉及到三个服务协调工作

调试服务器（Debug Server）

这是一个HTTP服务器，你能从weinre-node运行。这个HTTP服务会被Debug Client和Debug Target调用。

调试客户端(Debug Client)

这个是一个Web Inspector用户界面（类似于Firefox’s Firebug、chrome’s web Isnspector）；它包含常用的Elements、Resoureces、Network、TimeLine和Console面板，此外它还有一个Remote面板。

调试目标(Debug Target)

这是你想要进行调试的web页面。这个名字(Debug Target)也用于表示运行调试页面的设备。

其中Debug Client和Debug Target是基于HTTP通过XMLHttpRequest(XHR)与Debug Server进行通信。通常Debug Client和Debug Server运行在桌面上，而Debug Target运行在移动设备中。不过要让Debug Target起作用，需要向调试页面中注入Debug Server提供的JavaScript代码片段。 weinre components

NOTE：Weinre只能在基于Webkit内核的浏览器上工作，所以如果你使用Firefox和IE进行调试，那将不会工作。你可以使用Chrome和Safari来完成调试工作。因此weinre是非常适合用于调试IOS和Android移动设备的web页面和web apps。

安装

weinre是基于node.js实现的应用程序，所以要运行weinre需要下载和安装node运行环境。而weinre的安装可以通过如下两种方式进行安装：

npm 安装

weinre可以作为一个npm package进行安装。并且可以将二进制包*-bin.tar.gz的URLs和文件作为npm install命令的目标参数。在通过npm进行安装时，可指定-g选项实现全局域的安装。对于*ix和MAC，需要通过sudo获取操作权限，对于Windows，AFAIK，不需要sudo。如下实例所示：

sudo npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz

weinre也被部署在https://npmjs.org/package/weinre上，所以也可以通过如下命令安装：

sudo npm -g install weinre

NOTE：通过第二种命令进行安装时，可能会报错，可以通过指定特定安装版本来解决。如：sudo npm -g install weinre@lastest

二进制安装包

为了安装方便也提供了非公官方的二进制安装包： http://people.apache.org/~pmuellr/weinre/

启动服务

在命令终端总输入如下的命令行可以启动Wernre服务：

weinre [options]

其中options包含字段有：

–help(-?/-h)

显示帮助

–httpPort[端口号]

HTTP服务的端口号

default：8080

–boundHost [主机 | ip地址 | -all-]

将服务绑定到指定的ip地址上

default：localhost

使用默认值，除本机外，其他设备是不能访问到服务的。为了其他设备可以访问服务，需要绑定主机/ip地址。你也可以使用-all-，绑定当前主机上所有有效的接口。

想要获取你主机的ip地址：

mac和Linux用户可以通过ifconfig命令获取，对于windows用户可以通过ipconfig获取。

–verbose[true | false]

可让jibberish写入到标准输出流stdout中

Default：false

–debug[true | false]

可让更多的jibberish写入到标准输出流stdout中

Default：false

–readTimeout[秒(seconds)]

服务器等待消息成功发送到调试目标或客户端的秒数

Default：5

该值可以被设置成很大的数值，但是浏览器可能会超时。最好不要把它设置比默认值还小，因为会导致更多的网络流量产生，如空消息被发送。

–deathTimeout[秒(seconds)]

在调试客户端和目标挂掉之前，等待调试客户端和目标回复的秒数

Default：3*readTimeout

通常默认值是最佳的选择。然而，如过你要调试weinre，可以把该值设定大一些。

实例：

$ weinre –boundHost 192.168.1.1 –httpPort 9090

在IP地址为192.168.1.1:9090上启动了一个weinre服务。如果成功启动，此时命令终端会打印类似如下的信息：

2015-09-09T02:46:31.266Z weinre: starting server at http://192.168.1.1:9090

到此为止，只是搭建好调试服务器（Debug Server），接下来会介绍调试目标(Debug Target)的创建。

调试目标

此时你可以通过http://hostname|ip:port(如上：http://192.168.1.1:9090)访问创建好的调试服务器（Debug Server）。不过我们的目的是使用该服务来调试页面，这需要创建调试目标。要创建调试目标可以在你想要调试的页面中添加如下代码：

添加位置，一般放置body标签中，当然了也可以添加到head标签中，此时调试目标(Debug target)就创建好了。

调试客户端

当前你可以通过http://hostname|ip:port/client(如上：http://192.168.1.1:9090/client)访问调试客户端了。另外，你也可以直接访问http://hostname|ip:port(如上：http://192.168.1.1:9090)weinre的主页，再从主页访问调试客户端。 调试客户用户界面

使用方法与桌面端的浏览器调试类似（如Firefox’s Firebug、chrome’s web Isnspector），虽然功能上有所削减。不过已满足移动设备调试需求。另外可以参考Debugging mobile web applications remotely with WEINRE。

weinre主页

如图所示，weinre主页共7部分组成：weinre-web inspector remote、Access Points、Target Demos、Target Script、Target Bookmarklet、Development、versions。简单介绍一下其中比较有用的几个部分：

PS：详细介绍可以参考官网

Access Points（访问入口）：提供了调试客户端（Debug client）和weinre文档的访问链接。

Target Demos(调试目标实例)：提供了3个实例，如果你没有调试页面，可以使用该实例来了解weinre的特性。

Target Script：提供了注入调试页面的脚步链接。

Target Bookmarklet：该功能比较有意思，因为该功能可以动态注入target script到任一调试页面中。例如，在你的调试页面中添加如下代码：

http://10.129.193.88:9090/target/target-script-min.js#anonymous“);document.getElementsByTagName(“body”)[0].appendChild(e);})(document.createElement(“script”));void(0);’>weinre target debug

当单击【weinre target debug】链接时，调试页面会转化成调试目标（Debug Target）。

Development：提供了weinre开发接口

参考文献

WEINRE

Weinre As Remote Debugger

Debugging mobile web applications remotely with WEINRE