在桌面浏览器中调试iphone、ipad等设备上的网页

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

首先，去这里下载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://your-ip:1070，应该会看到这样的画面：

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

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

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

剩下的事情大家都知道：各个Tab对应各自不同功能，可以在主机上随意修改iPad网页上的dom、运行js、查看资源请求等等。用过webkit调试工具的同学肯定不会陌生。

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

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

 

Source Article from http://www.udpwork.com/item/6986.html