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. VC创建多级目录

    BOOL ForceCreateDirectory(string strDir)  {    BOOL bRet = FALSE;    //确保以"\"结尾,以创建最后一个目录  ...

  2. 笔记-Python基础教程（第二版）第一章

    第一章 快速改造:基础知识 01:整除.乘方 (Python3.0之前 如2.7版本) >>> 1/2 ==>0 1/2整除,普通除法: 解决办法1: 1.0/2.0  ==& ...

  3. netstat 查看连接数

    1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print ...

  4. apache 做负载

    首先说明一下,我感觉这种办法不太好,不能叫负载吧.不知道跳转到的服务器把数据返回给用户,还通不通过Apache的服务器,还有就是不能断点下载了 方法 1.打开httpd.conf  把如下模块前面的# ...

  5. 图像切换器（ImageSwitcer）的功能与用法

    ImageSwitcher继承了VewSwitcher,因此它具有与ViewSwitcher相同的特征,可以在切换View组件时使用动画效果.ImageSwitcher继承了ViewSwitcher并 ...

  6. 聚类系数（clustering coefficient）计算

    转自http://blog.csdn.net/pennyliang/article/details/6838956 Clustering coefficient的定义有两种:全局的和局部的. 全局的算 ...

  7. xtemplate语法

    XTemplate 是富逻辑的 KISSY 模板引擎,面向复杂的业务逻辑场景,同时保持高性能和丰富的配置方法,是易学易懂的模板语言. 一个典型的XTemplate模板实例: Hello {{name} ...

  8. 在MyEclipse 2014中给Spket增加ExtJS提示

    参考:http://wenku.baidu.com/link?url=BT2U6Z-HktQJQYpz3Jp88pJSp4lU-lXkvCqpdeaa9a-BVdOgMGK1vj486-32YC4Gq ...

  9. LeetCode Database题解

    175. Combine Two Tables 使用外连接即可. # Write your MySQL query statement below select FirstName, LastName ...

  10. ExtJS与后台Java交互

    参考博客:http://blog.csdn.net/wanghuan203/article/details/8125970 开发环境:Eclipse + Tomcat + ExtJS6.0 工程目录结 ...