使用weinre 远程调试移动设备上的网页

weinre简介

weinre 是一款类似于firebug 和Web Inspector的网页调试工具， 它的不同之处在于可以用于进行远程调试，比如调试手机上面的网页。

weinre的安装

weinre是用node编写的，可以用npm来进行安装(前提是您的机器上已经装了node)

npm install -g weinre

Mac 和Linux下推荐使用

sudo npm install -g weinre 

如何运行？

运行weinre之前，首先需要了解三个专有名词

Debug Server： 部署weinre的那台服务器
Debug Client： Web Inspector 界面，主要用来展示页面元素和控制台面板。
Debug Target： 你想要调试的网页，通常是位于手机上的网页。

安装完成后在termial中运行以下命令

weinre --httpPort=8081 --boundHost=znchen.waijule.cn //你自己Debug Server的域名， 也可以使用ip地址)

想了解更多weinre的配置启动项可以通过 weinre --help 命令来查看

也可以在HOME目录下创建 .weinre/server.properties 文件

boundHost:    znchen.waijule.cn
httpPort:     8081
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

这样可以直接运行weinre 命令，它会自动读取server.properties 里面的配置项。

打开浏览器， 输入 http://znchen.waijule.cn:8081

在需要调试的网页中加入Target Script

<script src="http://znchen.waijule.cn:8081/target/target-script-min.js#anonymous" />

打开debug client 界面

http://znchen.waijule.cn:8081/client/#anonymous

用手机设备打开待调试的网页，这时候你可以在 debug client界面上清晰的看到 Targets 列表（调试目标列表）

到此，你就可以方便的查看Elements， Resource, Console, Timeline 等面板了。