移动web开发远程真机调试工具weinre调试方法

2016年5月18日 8100点热度 0人点赞 4条评论

引言
对于开发者们来说，移动web的调试一直是个难题，前期可以使用模拟器来协助调试，但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。

简介
Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在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，因此首先要安装nodejs，然后使用npm进行安装：

npm -g install weinre

安装成功信息查看： weinre -v 如下图：

运行
启动debug server端：

weinre --httpPort 8081 --boundHost -all-

主要参数解析：
httpPort 调试服务器运行的端口，默认8080
boundHost 调试服务器绑定的IP地址或域名，默认localhost

启动debug client：
使用webkit的浏览器（注意:由于weinre的设计更多的是基于webkit的浏览器，因此建议使用chrome/safari）访问
weinre服务器：http://localhost:8081
获取本机ip cmd ipconfig 把上面的地址换成本机ip （http:///192.168.4.226:8081）

启动 target：
在需要调试的页面中需要引入js文件:

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

当然，如果要调试的页面很多，不方便在每一页都直接插入上文的代码。可以浏览器“书签”的方式保存一下面一段js，以动态方式插入script

javascript:(function(e){e.setAttribute("src","http://10.136.30.144:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

打开debug面板：

http://192.168.4.226:8081/client/#anonymous

真机调试:

在debug面板中可以监听到移动设备对目标页面的访问：

在移动设备上访问本机ip服务下的文件
http://192.168.4.226/zhongbao_1.4.2/wx/dem/userinfo/wx_show.html?open_id=sdsddddd555555

Weinre 支持的平台:

支持的调试客户端（运行调试界面的浏览器）：

Google Chrome
Apple Safari
其它基于 WebKit 的浏览器
支持的调试目标（需要调试的网站或应用的界面）：

Android 浏览器应用
iOS Mobile Safari 应用
PhoneGap/Cordova
other
不支持的调试目标：

iOS 3.1.3 及更早版本
webOS 1.45 及更早版本

其它说明:
1. 用手机连续访问多页面，这些页面都会在targets中列出，选中其中一个，即可进行调试。
2. 点击调试页面中的remote, 可以从调试页面切回targets列表。
3. client要在基本webkit核的浏览器上使用（Google Chrome， Apple Safari， Other recent-ish WebKit-based browsers ）。
4. server与target和client一定要能互联互通，这样才可以调试。

一些局限性:
1. elements部分，可以查看dom，修改样式。但无法直接编辑dom
2. resource部分，localstorage可以查看，但cookie看不到。
3. cosole部分，可以看console log，运行js。但无法像firebug那样报出js的错误，更不能加断点调试。

参考文档：

http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

http://blog.csdn.net/qmhball/article/details/45848215

http://www.cnblogs.com/diva/p/3995674.html

http://www.cnblogs.com/lhb25/p/debug-mobile-site-and-app-with-weinre.html