用Weinre远程调试移动网页

by JerryQu

at 2012-03-14 23:55:38

original http://www.udpwork.com/item/6986.html

今天Miller兄分享了一个很好的工具Weinre(WE bIN spectorRE mote)，可以在一个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://<your-ip>: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秒后才能收到反馈。有兴趣的同学也可以研究下～

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

        <div style="margin-top:8px;padding:6px 0;border-top:1px solid #3cf">
            <div style="text-align:center;margin:16px 0;padding:6px;border:0px dashed #999;font-family:arial;font-size:26px;font-weight:bold">
<a href="http://www.udpwork.com/item/6986.html#review_form" title="不喜欢" style="text-decoration:none">
    <img src="http://www.udpwork.com//images/thumb_down24.gif" alt="">
    <span style="color:#f33">0</span>
</a>
   
<a href="http://www.udpwork.com/item/6986.html#review_form" title="喜欢" style="text-decoration:none">
    <img src="http://www.udpwork.com//images/thumb_up24.gif" alt="">
    <span style="color:#3c3">0</span>
</a>

Google Reader