原帖地址:http://www.cnblogs.com/lhb25/p/debug-mobile-site-and-app-with-weinre.html
在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用。但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了。因此,移动开发人员都希望能有 Mobile 版本的 Firebug 或者 Chrome 开发人员工具。Weinre 就是这样一款工具,可以帮助我们调试移动网站及 PhoneGap 应用。
您可能感兴趣的相关文章
![](http://images.cnitblog.com/blog/36987/201306/01145817-35dcfee6a4f041b0a1339001727b436d.jpg)
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)。
![](http://images.cnitblog.com/blog/36987/201306/01115702-1b26fc0a67e142f69e6e464a5508d190.png)
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 包管理工具安装:
![](http://images.cnitblog.com/blog/36987/201305/23215010-b3dbb106f7d4444891a378019b073e45.jpg)
![](http://images.cnitblog.com/blog/36987/201305/23215018-7aff76e747aa4f80a8579c549405e724.jpg)
安装好以后就可以启动 Weinre 了,Weinre 提供了6个可选的启动参数,其中下面两个参数一般会修改,其它的用默认值就可以了。
- --httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口;
- --boundHost 调试服务器绑定的 IP 地址,也可以是域名,默认是 localhost,还可以设置为 -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 服务器主页:
![](http://people.apache.org/~pmuellr/weinre/docs/latest/images/server-home.png)
在服务器主页有两项内容很重要:
- A 链接到调试客户端页面,打开后默认到远程面板,如下图所示。
- B 目标代码,这段代码要加入到需要调试的页面中,也可以用书签的方式动态加入。
![](http://people.apache.org/~pmuellr/weinre/docs/latest/images/panel-remote.png)
远程面板总共有四部分:
- A 面板切换,用过 Chrome 或者 Safari 开发者工具的对这个界面肯定很熟悉。
- B 连接到调试服务器的页面,即可以调试的页面。
- C 连接到调试服务地的客户端,当前只有一个。
- D 调试服务器属性,绑定的端口和调试服务器能够响应式的 IP 地址列表。
远程面板以外,还有元素面板、资源面板、网络面板、时间线面板和控制台,后面这几个 Web 开发人员都很熟悉的,就不一一介绍了。
![](http://people.apache.org/~pmuellr/weinre/docs/latest/images/panel-elements.png)
![](http://people.apache.org/~pmuellr/weinre/docs/latest/images/panel-resources.png)
![](http://people.apache.org/~pmuellr/weinre/docs/latest/images/panel-network.png)
![](http://people.apache.org/~pmuellr/weinre/docs/latest/images/panel-timeline.png)
![](http://images.cnitblog.com/blog/36987/201306/01145943-f5d0ed5494654328b0d8b9b95a75fe1f.png)
Weinre 支持的平台
支持的调试客户端(运行调试界面的浏览器):
- Google Chrome
- Apple Safari
- 其它基于 WebKit 的浏览器
支持的调试目标(需要调试的网站或应用的界面):
- Android 浏览器应用
- iOS Mobile Safari 应用
- PhoneGap/Cordova
- other
不支持的调试目标:
- iOS 3.1.3 及更早版本
- webOS 1.45 及更早版本
本文链接:使用 Weinre 调试移动网站及 PhoneGap 应用
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
hide
![](http://www.cnblogs.com/lhb25/aggbug/3095562.html?type=1)
本文链接
分享到:
相关推荐
4. 调试工具支持:如使用 Weinre(WebInspector Remote)进行远程调试。 5. 更新的构建工具:可能包含了改进的命令行工具,方便开发者构建和打包应用。 在实际开发过程中,开发者需要理解PhoneGap的生命周期事件,...
PhoneGap是一种开源框架,它允许开发者使用Web技术(如HTML5、CSS3和JavaScript)来构建跨平台的移动应用程序。这个“PhoneGap-2.9.1”版本是该框架的一个旧版本,它包含了用于Android平台开发的关键组件。 1. **...
9. **调试工具**:PhoneGap提供了一套调试工具,如Chrome开发者工具、Weinre(Web Inspector Remote)等,帮助开发者在真实设备或模拟器上进行调试。 10. **应用发布**:完成开发后,开发者需要按照各个平台的规范...
9. **调试工具**:开发者可以利用Chrome开发者工具、Weinre(Web Inspector Remote)等工具进行远程调试,帮助定位和修复PhoneGap应用中的问题。 10. **社区和资源**:PhoneGap拥有庞大的开发者社区,提供丰富的...
调试PhoneGap应用可以使用Chrome开发者工具的远程调试功能,或者使用像Weinre这样的远程调试工具。对于Android端的Java代码,可以使用Android Studio的内置调试器。 9. **打包与发布** 在开发完成后,PhoneGap ...
为了调试PhoneGap应用,可以使用Chrome开发者工具的远程调试功能,或者使用像Weinre这样的远程Web Inspector工具。对于性能优化,要注意减少DOM操作,使用适当的缓存策略,并优化JavaScript代码。 总结来说,这个...
7. **调试与测试**:PhoneGap提供了模拟器和真机调试工具,如Chrome开发者工具、Weinre(Web Inspector Remote)等,帮助开发者在不同设备上测试应用的性能和兼容性。 8. **性能优化**:由于PhoneGap应用是基于...
PhoneGap提供了模拟器和实时同步工具,如Chrome的开发者工具、Weinre(Web Inspector Remote)等,帮助开发者在桌面浏览器上调试应用,并通过USB连接真机进行实时测试。 7. **应用商店发布** 开发完成后,...
PhoneGap作为一个流行的嫁接层,允许开发者使用JavaScript调用移动设备的硬件功能,如摄像头、联系人列表和文件系统,从而使得HTML5应用具备了与原生应用相当的功能。PhoneGap的优势在于它的易用性和跨平台特性,...
3. 调试:PhoneGap提供了远程调试工具,例如Chrome开发者工具或Weinre,可以方便地在设备上查看和修改代码。 五、进阶主题 1. 插件:PhoneGap的扩展能力在于插件,它们提供了更丰富的设备功能。例如,通过安装相机...
6. **调试技巧**:学习使用浏览器开发者工具、远程调试工具(如Chrome DevTools或Weinre)来调试PhoneGap应用。 7. **最佳实践**:掌握提高性能和优化用户体验的方法,如离线存储、异步处理和资源缓存。 通过深入...
在探讨HTML5工具的介绍与应用时,我们深入解析了一系列关键知识点,涵盖了移动开发、游戏开发以及相关的开发框架和调试工具。以下是对这些知识点的详细阐述: ### HTML5移动开发工具概览 #### 关于移动Web应用与...
而在移动平台上,weinre(Web Inspector Remote)是一个重要的选择,它通过建立服务器连接设备与调试器,可以通过Node.js的NPM进行安装和使用,提供了类似桌面浏览器的调试界面。 接着,JavaScript的远程断点调试是...
下载Aardwolf后,启动生成一个server,然后在要调试的页面里加上Aardwolf的代理,最后在device上启动应用程序,就能像使用firebug或chrome开发者工具那样来使用。 4. 移动平台Javascript开发模式 移动平台...