使用 weinre 远程调试移动端页面

首次做移动设备,发现调试很困难。mac 平台好点,可以通过 iOS 设备直连 mac 用 safari 来 debug,又由 MIHTool 工具。

但别的平台就惨了,虽然有跨平台的的 Adobe edge inspect,但免费版只能同时连一个客户端,而且需要通过 Adobe 的服务器来中转,速度很慢。Chrome 的 【USB 网页调试】功能就更惨了,不但需要通过官方服务器中转,这服务器还是 appspot 的,在国情面前,华丽倒下。

一番尝试后,尝试用 weinre 来调试。

工具说明略过,到官网翻阅。

从我搜到的文章来看,以前是 jar 包的,目前改用 nodejs,所以以下说明仅做记录备忘,具体以官方文档为准。

安装并测试

安装 node.js 环境,这样已附带包管理器 npm。下一步,npm 安装 weinre。

1
npm -g i weinre

查看命令用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ weinre --help
usage:   weinre [options]
version: 2.0.0-pre-HA5N9T49

options:
    --httpPort     port to run the http server on        default: 8080
    --boundHost    ip address to bind the server to      default: localhost
    --verbose      print more diagnostics                default: false
    --debug        print even more diagnostics           default: false
    --readTimeout  seconds to wait for a client message  default: 5
    --deathTimeout seconds to wait to kill client        default: 3*readTimeout

--boundHost can be an ip address, hostname, or -all-, where -all-
means binding to all ip address on the current machine'

for more info see: http://people.apache.org/~pmuellr/weinre/

默认情况下会使用 localhost:8080 来启用代理服务器,可以通过 –boundHost 参数来指定使用当前机器的 ip 以供移动设备访问使用(需为同一局域网或用其它方法使可以访问),如:

1
weinre --boundHost 192.168.50.144

然后手机端和 pc 端都访问上面设定的 ip 和端口 http://192.168.50.144:8080,页面如下(记这个页面为:代理服务器主页):

可以看到有 【Target Demos】 的部分,手机上随便点击一个 demo 链接。

手机上会打开一个这样的页面

电脑上访问第一部分【Access Point】中的第一个链接【debug client user interface】则有像下面那样的页面

Targets 列出的是访问经 weinre 代理的页面的列表,Clients 列出的则是设备列表,最下面是 weinre 代理服务器的一些参数。

这里只有手机访问了一个页面,故使用 Targets 中只有一个链接,点击高亮选择,然后可以切换到 Elements / Resources / Network / Timeline / Console 选项来进行调试,和 webkit 中的调试方式一致,如高亮鼠标停留的元素:

把页面设为可调试

上面使用的是已有的测试例子,对于自己的页面,可以通过添加代理服务器主页【Target Script】一节中的外链 js 到页面中来实现。

对于没法修改的页面,可以通过代理服务器主页【Target Bookmarklet】一节中 bookmarklet 来实现。手机里添加一个书签,书签地址是 bookmarklet 那段代码(iOS 上需要先完成添加书签然后才能修改书签地址)。

这样在手机访问百度后,再访问这个书签,即可在 pc 端的【Targets】列表综合那个看到这个页面,选择后即可调试,如下图:

可惜的是,目前 Resources 选项里还没有 script 这个更加需要的功能,对于 js 调试,似乎只能在代码里 print 了。

参考链接:

使用 Weinre 遠端 Debug 你的手機版網頁 (Mobile Web)