文档章节

weinre配置详细版

华哥_
 华哥_
发布于 2013/08/16 15:34
字数 1247
阅读 24
收藏 0

 在 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 或者下载二进制文件进行安装。

  使用二进制包安装的命令如下:


   
 
   
 
   
 
   
 
   
   
  1. npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz

  还可以通过 Node 包管理工具安装:


   
 
   
 
   
 
   
 
   
   
  1. npm -g install weinre


 

 

  安装好以后就可以启动 Weinre 了,Weinre 提供了6个可选的启动参数,其中下面两个参数一般会修改,其它的用默认值就可以了。

  • –httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口;
  • –boundHost 调试服务器绑定的 IP 地址,也可以是域名,默认是 localhost,还可以设置为 -all-,表示绑定到所有当前机器可以访问的接口。如下所示:

   
 
   
 
   
 
   
 
   
   
  1. weinre --boundHost -all-

   这些配置也可以在 Weinre 根目录下创建 server.properties 文件配置,内容如下所示:


   
 
   
 
   
 
   
 
   
   
  1. boundHost: -all-
  2. httpPort: 8081
  3. reuseAddr: true
  4. readTimeout: 1
  5. 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 及更早版本

本文转载自:

上一篇: linux常见命令
华哥_
粉丝 5
博文 122
码字总数 67861
作品 0
虹口
私信 提问
移动端Web开发调试之Weinre调试教程

原文地址:http://blog.csdn.net/freshlover/article/details/42640253 在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统...

程序员诗人
2017/04/24
0
0
Mac Phonegap + Weinre环境搭建

phonegap官网下载desktop app,并安装 下载并安装手机版的mobile app 安装npm,由于npm是随nodejs安装的,所以下载安装nodejs即可. 使用npm安装weinre 运行weinre 使用weinre 这样就可以实现...

蜡笔小白
2016/11/15
24
0
Web移动应用调试工具——Weinre

由于前面介绍的方式不太给力,于是找到了资深的学长问了问,他告诉我有个叫weinre的插件很不错,在进一步了解,发现了这篇文章。 weinre官网:http://people.apache.org/~pmuellr/weinre/do...

Megan_zhou
2013/06/14
502
0
使用Weinre调试webapp

weinre的安装: 首先下载nodejs,博主的环境是debian,在http://nodejs.org/download/ 下载源码包 解压并移动 tar xvf node-v0.10.26.tar.gzmv node-v0.10.26 /opt/nodejs //移动到/opt/node...

hentai
2014/03/19
5.5K
3
移动端网页调试 之 Eruda

前言 我打算将移动端网页调试作为一个专题介绍几个常用的调试工具,主要是样式调试和接口数据调试,目的是在提测和修bugs的阶段能快速定位问题,提高工作效率,这篇文章介绍的是Eruda。 相信...

WinMin
02/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
55分钟前
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部