使用 Weinre 调试移动网站及 PhoneGap 应用
在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用。但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了。因此,移动开发人员都希望能有 Mobile 版本的 Firebug 或者 Chrome 开发人员工具。 Weinre 就是这样一款工具,可以帮助我们调试移动网站及 PhoneGap 应用。
- 推荐8款很棒的测试网站速度的免费工具
- 12款很棒的浏览器兼容性测试工具推荐
- 构建杀手级应用 JavaScript 工具和技术
- 推荐25款提高网站可用性和转化率的工具
- 2012年最佳 Web 前端开发工具和框架
Weinre 简介
在使用 Weinre 之前,我们先了解一下 Weinre 的基本概念。 Weinre 的全称是 Web Inspector Remote(远程 Web 调试工具),功能和 Firebug、Webkit Inspector 类似,可以帮助我们在 PC 端远程调试运行在移动设备浏览器内的 Web 页面或应用,能够即时调试 DOM 元素、 CSS 样式 和 JavaScript 等。
使用 Weinre 的目的是调试运行在移动设备浏览器内的 Web 站点或者应用,我们称这个移动设备即为调试目标(Debug Target)。由于在移动设备上直接进行调试操作不便,Weinre 帮助我们使用桌面传统的 webkit 环境(比如 Web Inspector 或者 Google Chrome 的开发者工具)来进行调试,我们称这个桌面调试环境为调试客户端(Debug Client)。
Weinre 为了能够同步桌面的调试客户端和移动设备上的调试目标,需要你搭建一个调试服务器(Debug Server)。因此,在使用 Weinre 进行远程设备调试时,包含了上面的三种元素:
- 调试服务器:调试服务器起到代理的作用,用来同步调试目标和调试客户端之间的命令;
- 调试客户端:这是 Web Inspector 界面,即开发者在浏览器中进行调试的界面;
- 调试目标:需要调试的页面,也指用于运行被调试 Web 内容的的浏览器所在的移动设备。
Weinre 的调试目标和客户端都运行在浏览器中,而调试服务器则以 HTTP 服务器方式作为二者的中介运行。在 Patrick Mueller 关于 Weinre 的手册中,解释了这种关系。更详细的解释可见: http://muellerware.org/papers/weinre/manual.html。
Weinre 的安装和运行
Weinre 的调试服务器是基于 Node.js 实现的,因此在安装 Weinre 之前先要安装 Node 运行环境。安装 Weinre 有两种方式,使用 npm 或者下载二进制文件进行安装。
使用二进制包安装的命令如下:
npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz
还可以通过 Node 包管理工具安装:
npm -g install weinre
安装好以后就可以启动 Weinre 了,Weinre 提供了6个可选的启动参数,其中下面两个参数一般会修改,其它的用默认值就可以了。
- --httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口;
- --boundHost 调试服务器绑定的 IP 地址,也可以是域名,默认是 localhost,还可以设置为 -all-,表示绑定到所有当前机器可以访问的接口。如下所示:
weinre --boundHost -all-
这些配置也可以在 Weinre 根目录下创建 server.properties 文件配置,内容如下所示:
boundHost: -all-
httpPort: 8081
reuseAddr: true
readTimeout: 1
deathTimeout: 5
需要注意的是,命令行设置的参数会覆盖文件配置的参数。
Weinre 的使用
成功启动 Weinre 后就可以使用绑定的 IP 或者域名加上端口访问 Weinre 服务器了(我们这里以 http://localhost:8081 为例)。在 Webkit 核心的浏览器(例如 Chrome、Safari 等)中打开 Weinre 服务器主页:
在服务器主页有两项内容很重要:
- A 链接到调试客户端页面,打开后默认到远程面板,如下图所示。
- B 目标代码,这段代码要加入到需要调试的页面中,也可以用书签的方式动态加入。
远程面板总共有四部分:
- A 面板切换,用过 Chrome 或者 Safari 开发者工具的对这个界面肯定很熟悉。
- B 连接到调试服务器的页面,即可以调试的页面。
- C 连接到调试服务地的客户端,当前只有一个。
- D 调试服务器属性,绑定的端口和调试服务器能够响应式的 IP 地址列表。
远程面板以外,还有元素面板、资源面板、网络面板、时间线面板和控制台,后面这几个 Web 开发人员都很熟悉的,就不一一介绍了。
Weinre 支持的平台
支持的调试客户端(运行调试界面的浏览器):
- Google Chrome
- Apple Safari
- 其它基于 WebKit 的浏览器
支持的调试目标(需要调试的网站或应用的界面):
- Android 浏览器应用
- iOS Mobile Safari 应用
- PhoneGap/Cordova
- other
不支持的调试目标:
- iOS 3.1.3 及更早版本
- webOS 1.45 及更早版本
- OverAPI.com – 史上最全开发人员在线速查手册
- Regexper:牛逼的 JavaScript 正则可视化工具
- 今日推荐:值得一试的8个 Web 开发工具和资源
- CSS Matic:网页设计师必备的终极 CSS 工具箱
- 强大的矢量图形库:Raphael JS 中文文档及教程
本文链接: 使用 Weinre 调试移动网站及 PhoneGap 应用
编译来源: 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
hide