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. SQL Server数据库备份方法

    数据库备份,是在数据丢失的情况下,能及时恢复重要数据,防止数据丢失的一种重要手段.一个合理的数据库备份方案,应该能够在数据丢失时,有效地恢复重要数据,同时需要考虑技术实现难度和有效地利用资源. 数据库 ...

  2. sql2000数据库误删除后自行恢复二次覆盖成功恢复

    sql2000数据库误删除后自行恢复二次覆盖成功恢复 [数据恢复故障描述] 今天接到一个客户电话,他的速达sql2000数据库,数据库误删除了,关键之前还没有备份过.他就想自己尝试恢复,使用网上下载的 ...

  3. LeetCode---Depth-first && Breadth-first

    417. Pacific Atlantic Water Flow 思路:构造两个二维数组分别存储大西洋和太平洋的结果,先初始化边界,然后从边界出发,深度优先遍历,标记满足条件的所有节点 static ...

  4. fputcsv 导出CSV、Excel DownLoad

    以前使用excel导出插件导出50000左右的数据就经常遇到内存不足或者超时等现象,现在自己用fputcsv导出CSV比直接导出excel好多了,导出文件可以直接用excel打开.下载后可放在框架目录 ...

  5. zepto.js swipe实现触屏tab菜单

    今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...

  6. db2 数据类型

    数据类型: 字符串类型 描述 CHARACTER(n) n bytes定长字符串. n 大于0 不大于255. 默认 1. VARCHAR(n) 变长字符串,最大 n bytes. n大于 0 小于表 ...

  7. JavaScript 44 Puzzlers

    http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651550987&idx=1&sn=f7a84b59de14d0b ...

  8. redis内存占用说明

    执行info命令后,找到Memory这一栏,就可以看到内存的使用信息了,如下图: # Memory used_memory:13490096 //数据占用了多少内存(字节) used_memory_h ...

  9. Hadoop权威指南:数据完整性

    Hadoop权威指南:数据完整性 [TOC] 常用的错误检测码是CRC-32(循环冗余校验) HDFS的数据完整性 HDFS会对写入的所有数据计算校验和,并在读取数据时验证校验和 datanode负责 ...

  10. yum安装CDH5.5 Hadoop集群

    1.环境说明 系统环境: 系统环境:centos6.7 Hadoop版本:CDH5.5 JDK运行版本:1.7.0_67 集群各节点组件分配: 2.准备工作 安装 Hadoop 集群前先做好下面的准备 ...