用Weinre远程调试移动网页

1524次阅读  |  发布于5年以前

今天Miller兄分享了一个很好的工具Weinre(WEb INspector REmote)，可以在一个Webkit下远程调试另一 个Webkit里的网页，典型应用就是在桌面浏览器里调试iPhone、iPad等移动设备上的Safari。刚好之前小强有类似需求，这里就简单介绍下它的基本用法 。

首先，去这里下载Weinre的最新版。这个目录有两个zip包，下载那个weinre-jar-x.x.x.zip就好了，解压得到weinre.jar，随便找个 目录放。那个mac包可以忽略，它只是把jar打包成一个图标巨难看的app，还不如直接用jar方便。

然后打开终端，进到weinre目录，运行下列命令，以指定端口和要绑定的ip启动weinre服务（假设java环境变量已经配好）：


java -jar weinre.jar  --httpPort 1070 --boundHost -all-

接着打开基于webkit的浏览器，输入http://:1070，应该会看到这样的画面：

被调试的网页需要跟weinre服务建立连接，需要页面引入target-script- min.js(上图红线标出)。根据实际情况，可以选择修改源代码加入script标签，或者通过收藏夹执行js动态插入。

接着，点击上图中第一个链接，打开weinre client，应该是这样的画面：

可以看到，上图中Targets为空。这是因为还没有页面连上weinre服务。在iPad上访问主机的一个页面试试（iPad必须和主机在同网段，且访问的页面已经 加好了target script）。可以看到，Targets有内容了：

剩下的事情大家都知道，各个Tab对应各自不同功能，可以在主机上随意修改远程网页上的dom、运行js、查看资源请求等等，用过webkit调试工具的同学肯定不会 陌生。只是个人感觉很有用的调试js功能却没有提供。

先介绍到这里，希望对大家能有帮助，最后再贴两张截图（可以看到第二图的UA是iPad）：

update @ 2012-03-18：写完这些，我又尝试了Adobe Shadow这个基于Weinre开发的工具。它能轻松的在多台设备（支持IOS、Android）上同步浏览网页，还能任选其一来调试。由于在移动设备上有App的支持，省去了手工插入target script这一步，非常方便。美中不足是它的client页访问的adobe远程服务器，延时比较大。在我这里每操作一下，大概1秒后才能收到反馈。有兴趣的同学也可以研究下～

update @ 2013-01-05：这篇文章写了快一年，实际上平时我很少使用这种方式调试移动网页。大家知道，最新的Mac版Safari自带远程调试功能，使用更方便。简单使用步骤：安装Mac版Safari，在"偏好设置"里选择"在菜单栏显示'开发'菜单"；再在iOS设备中进入"设置"->"Safari"->"高级"，打开"Web检查器"，连上电脑。这样，在Mac版Safari的"开发"菜单下应该可以看到自己的设备名了，子菜单下有该设备上打开的网页。PS：这种方法对于嵌入在App中的网页也同样有效，非常赞~唯一遗憾的是，Safari6貌似木有了Windows版了，所以只能在MacOS下用这种方法了。

扩展阅读：用Opera Mobile调试手机版网页

专题「开发工具」的其他文章 »

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8