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.cnhttpPort: 8081reuseAddr: truereadTimeout: 1deathTimeout: 5
这样可以直接运行weinre 命令,它会自动读取server.properties 里面的配置项。
打开浏览器, 输入
在需要调试的网页中加入Target Script
打开debug client 界面
http://znchen.waijule.cn:8081/client/#anonymous
用手机设备打开待调试的网页,这时候你可以在 debug client界面上清晰的看到 Targets 列表(调试目标列表)
到此,你就可以方便的查看Elements, Resource, Console, Timeline 等面板了。