Weinre 是一款远程调试工具，使用JS编写， 可以让我们在电脑上直接调试运行在手机上的远程页面，当你的代码已经发布上线，这时候出现了问题，Weinre就可以帮你调试。

调试场景

  1. 调试页面在手机上。
  2. 调试工具在PC的chrome
  3. 手机跟pc要在同一个网络环境下，也就是都使用一个wifi

安装Weinre

Weinre是基于nodejs实现的，所以使用它必须先安装node运行环境，新版的node已经集成了npm, 所以直接在在命令行键入下面的命令即可安装， 如果你是Mac/Linux用户， 还需要在前面加入"sudo":

[sudo] npm -g install weinre

如上所示，表示安装成功。

在个人使用的终端Terminal上输入：

weinre

启动成功后，默认boundHost为localhost， 服务器运行的端口，默认为8080， 只能本地pc上用 http://localhost:8080 在浏览器上打开。

如果这个8080端口有在用，可以改为其它端口，如8082，同时我们又需要让其他设备以及本地设备用 ip 打开Weinre调试工具，则需要如下输入：

weinre --httpPort  --boundHost -all-

--boundHost  [hostname | ip address | -all-] : 默认是'localhost'， 这个参数是为了限制可以访问Weinre Server的设备， 设置为-all-或者指定ip， 那么任何设备都可以访问Weinre Server。

浏览器打开Weinre调试工具

 http://本地ip:8080

本地ip地址如下获取：

这样，就可以通过 http://192.168.0.15:8082  打开页面 Weinre 工作界面了。

在Weinre 工作界面中，有两部分是我们用到的，

第一部分是Access Points，如下图：

图片中第1行的debug Client urse inferface 地址是Debug Client(Weinre调试工具)的用户访问接口，可以通过这个地址进入Debug Client。

第二个部分是Target Script，如下图：

这个Example给出的链接地址，是系统根据我们启动Weinre服务时的参数设置自动生成的target-script.js文件，我们只需要将这个js文件嵌入到待测试的页面中，下图所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>test</title>

    <script src="http://192.168.0.15:8082/target/target-script-min.js#anonymous"></script>

</head>

<body>

</body>

</html>

接下来，单击http://192.168.0.15:8082/client/#anonymous  打开Debug Client 工作界面，如下图：

页面RemoteTab由三部分组成，

  1. Targets是注册的远程设备列表， 当前我们还没有访问测试页面， 所以Targets列表为none，
  2. Clients是Weinre客户端， 也即打开这个Weinre页面的设备列表。
  3. ServerProperties就是我们启动Weinre时的一些配置项。在手机上打开测试页就可以开始调试了。

可以在Target列表中点击那个设备的对应的列表项， 可以看到当点击后， 该项变为绿色表示选中， 此时测试的就是选中设备的页面。

单击 Elements 按钮，就会看到远程页面的DOM 文档。

与chrome,webkit调试工具类似，各个Tab对应各自不同的功能，可以在主机上随意修改远程网页上的dom、查看资源请求等， 同时在手机对应的调试页面里，查看效果。注意，手机跟Weinre调试工具要在同一个wifi网段下。

weinre缺点：

没有提供JS调试功能。

Weinre 远程调试移动端页面的更多相关文章

  1. Weinre 远程调试移动端手机web页面

    调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...

  2. Weinre调试移动端页面

    Weinre是什么 如果我们做的是Cordova(phonegap)或其他hybird应用,当使用到原生功能时候(类似原生请求数据或页面切换时),没办法在PC chrome浏览器调试页面,一旦页面在手 ...

  3. grunt、Browsersync服务及weinre远程调试

    一.grunt server服务 前端开发时,经常需要把静态文件映射成web服务,传统的做法是丢到apache,但太重太不友好了.开发angular的时候,官方的chrome插件对file:///的支 ...

  4. 使用 桌面的 chrome 远程调试 Android 的页面

    手机浏览器是没有开发者工具的,所以调试手机网页是非常麻烦.使用 chrome 的远程调试功能可以像调试桌面端那样调试手机页面. 准备 手机端:chrome for Android, 安装谷歌浏览器 桌 ...

  5. 使用weinre远程调试

    1.调试环境: 1)使用nodejs搭建调试服务器: 先安装node,然后使用npm安装weinre,在node.js安装目录输入以下命令 npm install weinre 2)需要wifi环境和 ...

  6. Cordova 5 架构学习 Weinre远程调试技术

    手机上的页面不像桌面开发这么方便调试.能够使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装.能够执行: ###npm config set regi ...

  7. weinre远程调试

    一: 关于weinre weinre是一款依赖于nodejs的远程调试工具,现阶段一般用到手机app上调试非常的强大 二: weinre的安装 1)  安装 nodejs以及npm 2) 安装wein ...

  8. weinre 远程调试 安装 配置

    1.第一种方法:安装:npm install -g weinre 2.第一种方法:开启本地监听服务器(修改端口,默认端口是8080):在cmd中运行: weinre --httpPort 8101 - ...

  9. 移动端页面(css)调试之“weinre大法”

    移动端页面调试一般分两步.第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为代理,具体可以参考 如何用 fiddler 代理调试本地手机页面,这样我们就 ...

随机推荐

  1. SQLSERVER TRUE、FALSE、UNKNOWN

    null和其他值比较都是unknown 在SQL中逻辑表达式的可能值包括TRUE.FALSE.UNKNOWN.他们被称为三值逻辑.三值逻辑是SQL所特有的.大多数的变成语言的逻辑表达式 只有TRUE或 ...

  2. java系列--过滤器

    在web.xml配置过滤器:过滤器一定要放在所以Servlet前面 过滤器的生命周期: 过滤器的应用: 1.编码格式 2.权限验证 3.数据库关闭

  3. Struts2接受参数的几种类型和接受复杂类型参数（list<String>和list<Object>）

    Struts2接受参数的几种类型 大概有这几种类型: 1.使用Action的属性接受参数 在Action中加入成员变量,配置Getter和Setter方法,Getter而和Setter方法的名字和表单 ...

  4. Dictionary使用（转）

    1.要使用Dictionary集合,需要导入C#泛型命名空间 System.Collections.Generic(程序集:mscorlib)2.描述 1).从一组键(Key)到一组值(Value)的 ...

  5. 包含中文字符的NSString 转换为NSURL

    转包含中文字符的NSString 转换为NSURL NSString中如果包括中文字符的话转换为NSURL得到的值为nil,在网上搜了下,用stringByAddingPercentEscapesUs ...

  6. centos 6.5下cmake工具的安装与配置

    一.cmake是什么? CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C+ ...

  7. YII 1.0 隐藏单入口index.php 设置路由与伪静态

    隐藏 index.php 保证apache配置文件httpd.conf里的LoadModulerewrite_module modules/mod_rewrite.so开启(去掉#)将相对应目录的Al ...

  8. 在向服务器发送请求时发生传输级错误。 (provider: TCP 提供程序, error: 0 - 远程主机强迫关闭了一个现有的连接。)

    用VS2005+SQLSERVER2008开发C/S的程序,程序上线运行一段时间之后发现在某些功能偶尔出现如下的错误: 在向服务器发送请求时发生传输级错误. (provider: TCP 提供程序, ...

  9. Delphi的时间与字符串函数代码示例

    [delphi] view plaincopyprint? SysUtils.StrToDate(); SysUtils.StrToDateDef(); SysUtils.TryStrToDate() ...

  10. hadoop-1.x的运行实例

    我的环境是hadoop-0.20.2,eclipse:SDK-3.3.2, 源数据为: Apr 23 11:49:54 hostapd: wlan0: STA 14:7d:c5:9e:fb:84 Ap ...