移动web App前端调试 --Weinre&MIHTool

最新推荐文章于 2021-11-11 17:06:51 发布

LeuisKen

最新推荐文章于 2021-11-11 17:06:51 发布

阅读量2.8k

点赞数

众所周知，移动前端的调试不像 PC 端的调试那样方便，在 PC 端不管是 chrome 还是 IE ，都有自己的开发者工具，只要安装了既可以方便实时调试。 Mobile Web App 由于受到网络、硬件设备的限制，调试起来就要麻烦多了。今天就跟大家推荐两个工具 Weinre 和 MIHTool ，能通过 PC 端的浏览器调试，实时看到移动端修改的效果。

一、Weinre

Weinre（Web Inspector Remote）作为一种远程调试工具，功能与Firebug、Webkit inspector类似，可以帮助我们实时修改页面样式、Dom结构、js调试。

Weinre在结构上分为三层:

目标页面（target）：被调试的页面，页面已嵌入Weinre的远程js；

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

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

Weinre的通信过程是这样的:

安装及运行Weinre请参考：http://blog.csdn.net/dojotoolkit/article/details/6280924

如果你有幸所在的公司移动设备可以访问局域网，那么恭喜你，在自己的服务器上按照Weinre的参考教程，用Dos或者Linux的安装命令解压Weinre就可以用了。

BUT如果你是和腾讯公司一样，移动设备因为安全考虑，不提供局域网入域的话，那就必须把Weinre安装在一个外网的服务器上。已经安装在WDC官网上的Weinre地址是http://wdc.tencent.com:8081/ （仅内网可见）是一个牺牲品，目前暂不开放外网权限。（if开放外网权限，你仅仅需要把http://wdc.tencent.com:8081/target/target-script-min.js#anonymous这段js放在你的页面的头部，然后用PC的chrome或者safari打开http://wdc.tencent.com:8081/client/#anonymous这个地址【红色部分为自定义字段，与js的自定义字段相同即可】，移动设备打开一个已经加好js的网页，Weinre就能实时通信了）

调试尚未成功，同志仍需努力。下面就借用下MIG的移动调试接口来演示下Weinre的使用。（如果你没有用过Weinre，可以跟着下面的步骤体验下移动调试的乐趣）

（1）用iphone(或其他任何手机)打开一个页面http://mat1.gtimg.com/www/mb/txwb_iphone2.html ，页面如下截图。

用pc打开查看源代码，就可以知道页面里放了一段js：

（2）PC上用chrome打开http://johnye2.kf0309.3g.qq.com/client/#letitia ，就可以看到Weinre获取到的移动Targets，点击下蓝色的地址（变绿色）

（3）在console中输入document.body.style.background="#000"

（4）页面背景色被修改为黑色：

到这一步，Weinre的调试成功。

二、MIHTool

MIHTool是网易前端开发工程师李高璐同学开发的一款移动前端调试工具，是用的apache开源的Weinre，在国外非常的火， jQuery UI 的作者也是Zynga工作室的CTO Paul Bakaus曾在twitter上强力推荐这款App，同时Google工程师Addy Osmani也曾在一期Mobile Web Thursday : Dev Tools上介绍过这款App（观看地址如下http://v.youku.com/v_show/id_XNTM0NDIwNTQw.html，从14分开始观看）。