Weinre 移动Web远程调试工具

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

本文完~~~