Weinre最大的特点是在PC上远程调试移动网站及 PhoneGap 应用 全称是远程 Web 调试工具 功能与Firebug类似 不仅可以调试调试 DOM 元素 CSS 样式 和 JavaScript 还可以监听网络请求
① 安装
由于Weinre是基于node.js实现 安装前需要安装Node
之后便可以通过npm命令安装Weinre
npm -g install weinre
② 使用
weinre安装完成后 便可以使用weinre命令启动服务器 weinre提供了以下参数
boundHost: -all-
httpPort: 8081
reuseAddr: true
readTimeout: 1
deathTimeout: 5
常用的参数只有两个
--httpPort 调试服务器端口 默认是8080
--boundHost 调试服务器绑定的 IP 地址或域名 默认localhost
如果指定为-all- 表示绑定到当前机器可以访问的所有IP
启动服务器
weinre --httpPort 9090 --boundHost -all-
httpPort尽量不要占用8080 以免与你的项目端口冲突
启动完成后 在浏览器中访问http://localhost:9090/
weinre服务器首页
在页面中找到Target Script
Target Script表示你要调试的页面
在页面中引入target-script-min.js 如下:
<script src="http://localhost:9090/target/target-script-min.js#anonymous"></script>
之后在手机中访问调试页面
回到weinre首页 找到Access Points -> debug client user interface
点击链接 http://localhost:9090/client/#anonymous
Targets
Targets表示所有调试的页面
调试页面
为了方便看到效果 我是通过PC浏览器的访问的调试页面
当鼠标悬浮在元素之上时 便可以在手机端看到右侧效果
并可以看到CSS
欢迎关注微信个人订阅号：DevTipss
DevTips.jpg
本文完~~~
