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中点击需要调试的页面选中,就可以随意调试了,效果还是相当不错的.

面板 #

调试主要包括 6 个面板:主要是上面说到的Remote以及其它五个同样可以在chrome控制台看到的面板 :Elements、Resources、Network、Timeline、Console等,功能和Chrome控制台中相差不多,不细说.

比较蛋疼的是weinre对网速的要求比较高,没办法,这是肯定的,所以偶尔会出现不够实时等现象.