使用 Weinre 调试移动网站及 PhoneGap 应用
在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用。但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了。因此,移动开发人员都希望能有 Mobile 版本的 Firebug 或者 Chrome 开发人员工具。Weinre 就是这样一款工具,可以帮助我们调试移动网站及 PhoneGap 应用。
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 及更早版本
使用 Weinre 调试移动网站及 PhoneGap 应用的更多相关文章
- 使用 Weinre 调试移动网站
在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用.但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了.因此,移动开发人员都 ...
- 使用weinre调试Web应用及PhoneGap应用
Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试,包括针对JavaScript,DOM元素和CSS样式的调试.但是,当我们期望为移动Web站点或应用进行调 ...
- 使用weinre调试手机页面
阅读目录 介绍Weinre 安装Weinre 通过Weinre调试页面 启动target 介绍Weinre Weinre(Web Inspector Remote),是一种远程调试工具.功能与Fire ...
- Weinre调试移动端页面
Weinre是什么 如果我们做的是Cordova(phonegap)或其他hybird应用,当使用到原生功能时候(类似原生请求数据或页面切换时),没办法在PC chrome浏览器调试页面,一旦页面在手 ...
- 配置IIS Express以便通过IP地址访问调试的网站
问题背景 最近使用C#编写了一个WebService,希望通过Java进行调用.使用Visual Studio 2013调试WebService时,可以在浏览器中通过localhost地址访问WSDL ...
- 如何利用 Chrome 来模拟移动网络来调试 FastAdmin 网站
如何利用 Chrome 来模拟移动网络来高度 FastAdmin 网站 因为目前大多数都在开发移动类的网页,所以客户端的速度下载速度要也考虑. 虽然都已经 4G 了,但还是要看看在网络质量很差的情况 ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- (SenchaTouch+PhoneGap)开发笔记(2)开发环境搭建二
一.Java环境和Android SDK 1.安装JDK和JRE JRE会在JDK安装完成后自动出现安装界面. 安装完成后,设置环境变量 JAVA_HOME D:\Program Files\ ...
- grunt、Browsersync服务及weinre远程调试
一.grunt server服务 前端开发时,经常需要把静态文件映射成web服务,传统的做法是丢到apache,但太重太不友好了.开发angular的时候,官方的chrome插件对file:///的支 ...
随机推荐
- shell 脚本之循环使用 for while 详解
任何一种编程语言中循环是比不可少的,当然 shell 脚本也少不了循环语句,包括 for 语句. while 语句.文中主要以实际用例来说明 for while 都有哪些常见的使用方法和技巧. 一.f ...
- win 7下建立FTP
1.安装FTP服务 鼠标桌面右击个性化-卸载程序-打开或关闭windows功能 2.在IIS控制面板里添加FTP站点 下一步 下一步 鼠标右击 下一步 下一步 3.配置ftp站点 4.测试站点是否正常 ...
- gdb 基本知识
一 单步执行和跟踪函数调用 先给出一段代码,可以用下面介绍的例子. #include <stdio.h> int add_range(int low, int high) { int i, ...
- 【Unity Shaders】学习笔记
http://www.cnblogs.com/-867259206/p/5596698.html
- 理解SVG的viewport,viewBox,preserveAspectRatio
万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...
- [LeetCode] Super Ugly Number 超级丑陋数
Write a program to find the nth super ugly number. Super ugly numbers are positive numbers whose all ...
- mysqld初探
一.简介 deamon是守护神的意思,表示守护进程.mysqld就是mysql的服务器端,就是基于socket的一个服务器端程序,它始终监听3306端口(默认端口).mysql是客户端程序. 安装my ...
- background-size
语法: background-size:length|percentage|cover|contain length:设置背景图像的宽度和高度, 第一个值为宽度,第二个值为高度. 如果只设置一个值,则 ...
- EntityFramework之监听者判断SQL性能指标
前言 当我们利用EF这个ORM框架时,我们可能会利用LINQ或者原生的SQL语句来进行数据操作,此时我们无法确定我们的代码是否会给数据库带来一定的负载,当给数据库带来一定的压力时,由于项目中对数据进行 ...
- ROS中DDNS的使用
一.通过tool fetch更新ddns,关于此命令的使用,参考 tool fetch Scripts中添加脚本/tool fetch url="http://www.51kwl.com/? ...