Weinre

weinre全名web inspector remote,就是web远程调试工具,可以远程调试页面,浏览器端其实用处不大,移动端却意义非凡,毕竟移动端可没有Chrome Console等调试工具存在的.

安装

使用npm能够很容易的将weinre安装到机器上

sudo npm -g install weinre

结构

weinre主要包含三层结构:

target: 调试的目标页面,需在页面中嵌入脚本
client: 调试用的页面,用于调试页面
agent: 搭建了weinre的服务端,用于和target&client通信

原理

weinre主要使用webSocket通信来连接调试页面和被调试页面,target中嵌入weinre调试脚本后会向服务端发起webSocket请求, 打开client页面后,client也会像服务端发起请求,如此通过agent便能成功与target进行通信.

配置

~/.weinre/server.properties中有着weinre的主要配置:

boundHost: 监听的host,可设置为-all-即可监听所有
httpPort: 监听的端口号
reuseAddr: May be needed if you restart your server frequently.当你频繁的重启服务器是可能会用到,好像是自动占用端口号的意思?不清楚
readTimeout: 发送信息到target或client时的Timeout
deathTimeout: target或client无响应存活时间的Timeout

运行

可以直接将配置当作参数运行时加载

weinre -boundHost host -httpPort port

脚本

运行weinre后打开浏览器后可看到weinre的介绍,在Target Script中可以看到如何向target中嵌入脚本.脚本后的锚点部分为id标识,在可以在client页面中加入同样的id来查看对应id的target.(注意不要忘记添加 id,不然可能没法成功,同事没加成功了,我没加死活看不到,不知道为啥)

也可以使用标签的方式为target添入脚本启动weinre,在Target Bookmarklet可以看到描述,然并卵,因为手机上没用啊…

调试

页面嵌入脚本后打开页面,然后打开对应的调试页面http://host:port/client/#id,可以看到Remote中的targets和clients列表, 还有Server Properties的配置,在targets中点击需要调试的页面选中,就可以随意调试了,效果还是相当不错的.