蓝戒的博客


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

引言
对于开发者们来说,移动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客户端建立通信。

三层结构如下图所示:

http-flow

安装

weinre基于nodejs,因此首先要安装nodejs,然后使用npm进行安装:

npm -g install weinre

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

weinre_v

运行
启动debug server端:

weinre --httpPort 8081 --boundHost -all-

weinre_result

主要参数解析:
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)

weinre1

启动 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);

weinre2

打开debug面板

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

真机调试:

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

weinre4
在移动设备上访问本机ip服务下的文件

http://192.168.4.226/zhongbao_1.4.2/wx/dem/userinfo/wx_show.html?open_id=sdsddddd555555

weinre5

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

本文固定链接: http://www.webzsky.com/?p=908 | 蓝戒的博客

cywcd
该日志由 cywcd 于2016年05月18日发表在 javascript, web技术 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 移动web开发远程真机调试工具weinre调试方法 | 蓝戒的博客

目前共有 2 条留言 【 访客:2 条, 博主:0 条 】 访客以 2:0 暂时领先博主!

  1. 沙发
    李蕾:

    66666

    2016-07-01 下午 8:06
    • 用过的都说好,

      2016-07-18 下午 6:34

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×