使用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 等面板了。