1. 初识Weinre

  Weinre(Web Inspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具， 它使用JS编写， 可以让我们在电脑上直接调试运行在手机上的远程页面。 与传统的Web Inspector的使用场景不同， Weinre的使用场景如下图， 调试的页面在手机上， 调试工具在PC的chrome， 二者通过网络连接通信。

weinre的使用场景

1.1 Weinre实验环境搭建

  下面是Weinre的安装运行说明， 如果你熟悉Grunt， 那么也可以直接跳过这里， 按照下面1.1(补充)的步骤来搭建环境。

1.1.1 安装Weinre

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

  1. [sudo] npm -g install weinre

  安装成功，会得到下面的输出。如果你想根据自己的需要选择下载Weinre文档、源码、运行压缩包， 那么可以通过这个网址下载：点击查看。

Weinre安装成功

1.1.2 运行Weinre

  在Terminal中输入weinre开启服务, 

  1. weinre

  若运行成功，输出如下：

运行Weinre

  像上面这样虽然启动成功了，但是默认boundHost为localhost，只能本地PC上用http://localho-st:8080来访问，将localhost换做本地ip就无法打开Weinre调试工具，为了能在其他设备以及本地设备用ip打开Weinre调试工具，我们还需要设置boundHost为"-all-"，如下：

  1. weinre --boundHost -all-

  Weinre还提供了下面的启动参数:

--help : 显示Weinre的Help

--httpPort   [portNumber] : 设置Weinre使用的端口号， 默认是8080

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

--verbose   [true | false] : 如果想看到更多的关于Weinre运行情况的输出， 那么可以设置这个选项为true， 默认为false；

--debug   [true | false] : 这个选项与—verbose类似， 会输出更多的信息。默认为false。

--readTimeout   [seconds] : Server发送信息到Target/Client的超时时间， 默认为5s。

--deathTimeout   [seconds] : 默认为3倍的readTimeout， 如果页面超过这个时间都没有任何响应， 那么就会断开连接。

  执行完上面的命令，在浏览器地址栏中输入下面的网址打开Weinre调试工具。

  1. http://本地ip:8080

  在页面中，有两部分是我们要使用的，第一部分是Access Points，如下图：

AccessPoints

  红框中的地址是Debug Client(Weinre调试工具)的用户访问接口，可以通过这个地址进入Debug Client。

  第二个部分是Target Script，如下图，这个地址是系统根据我们启动Weinre服务时的参数设置生成的target-script.js文件的链接地址。我们需要将这个js文件嵌入到待测试的页面中。要注意的是不要使用localhost:8080打开Weinre服务，否则生成的TargetScript链接也以localhost开头，这样直接复制到手机，就无法获取到文件了。

TargetScript

1.1.3 搭建实验环境

  有了上面的基础， 我们就可以搭建实验环境了。在你的Web环境(apache/tomcat等)下创建下面的目录结构：

  • lib      //存放zepto.js的目录

    — zepto.js

  • data.json  //任意json格式的文件
  • index.html

  使用下面的命令运行Weinre服务：

  1. weinre --httpPort 8082 --boundHost -all-

  打开http://本地ip:8082，将TargetScript中生成的链接嵌入到待测试页中。并且通过AccessPoints中给出的用户接口进入DebugClient, 编辑index.html， 如下, 最后的target-script.js链接需要自己修改。

  1. <!DOCTYPE html>
  2. <html><head><meta charset="UTF-8"></head>
  3. <body>
  4.     test
  5.     <script type="text/javascript" src="lib/zepto.js"></script>
  6.     <script type="text/javascript"> 
  7.         $(function() {
  8.             $.ajax({
  9.                 url:'data.json',
  10.                 success:function(res) {
  11.                     console.log(res);
  12.                 }
  13.             });     
  14.             window.localStorage.a = 'abc';
  15.             console.log(window.localStorage);
  16.         });
  17.     </script>
  18.     <script src="http://10.68.124.176:8082/target/target-script.js"></script>
  19. </body></html>

  在data.json文件中随便填入一些json格式的数据，至此实验环境已经搭建完成。

  打开后的DebugClient如下图：
DebugClient

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

1.1(补充) 使用Grunt搭建环境

  为实验方便， 这里使用到了grunt-contrib-watch与grunt-contrib-connect。这两个插件的使用请参考watch, connect， 这里不做介绍， 要注意的是这里假设你已经安装了node运行环境。

  a. 首先使用npm安装以下插件（package.json文件中依赖如下）

  1. "devDependencies":{
  2.         "grunt":"^0.4.5",
  3.         "grunt-weinre":"~0.0.2",
  4.         "grunt-contrib-connect": "~0.7.1",
  5.         "load-grunt-tasks": "~0.4.0",
  6.         "grunt-concurrent": "~0.5.0",
  7.         "grunt-contrib-watch": "~0.6.1"
  8. }

  b. 安装好后， 配置Gruntfile.js如下：

  1. module.exports = function(grunt) {
  2.     require('load-grunt-tasks')(grunt);
  3.     grunt.initConfig({
  4.         watch: {
  5.             livereload:{
  6.                 options:{ livereload:true },
  7.                 files:[ '*.html' ]
  8.             }
  9.         },
  10.         weinre: {
  11.             dev: {
  12.                 options: { httpPort: 8082, boundHost: '-all-' }
  13.             }
  14.         },
  15.         connect: {
  16.             options: { port: 9000, open: true, livereload: 35729, hostname: '0.0.0.0'},
  17.             livereload: {
  18.                 options: {
  19.                     middleware: function(connect) {
  20.                         return [ connect.static('static') ];
  21.                     }
  22.                 }
  23.             }
  24.         },
  25.         concurrent: { dist: ['weinre','watch'] }
  26.     });  
  27.     grunt.registerTask('default', ['connect','concurrent']);
  28. };

  c. 建立如下图的目录结构, static目录是我们在Gruntfile中配置的静态文件目录，里面存放我们的测试页面以及相关的静态资源， 这里为了测试ajax请求， 使用到了一个data.json文件与zepto.js。

目录结构

  在Terminal输入下面命令，开启Weinre服务：

  1. grunt

  打开http://本地ip:8082，将TargetScript中生成的链接嵌入到待测试页中。并且通过AccessPoints中给出的用户接口进入DebugClient, 编辑index.html， 如下, 最后的target-script.js链接需要自己修改。

  1. <!DOCTYPE html>
  2. <html><head><meta charset="UTF-8"></head>
  3. <body>
  4.     test
  5.     <script type="text/javascript" src="lib/zepto.js"></script>
  6.     <script type="text/javascript"> 
  7.         $(function() {
  8.             $.ajax({
  9.                 url:'data.json',
  10.                 success:function(res) {
  11.                     console.log(res);
  12.                 }
  13.             });     
  14.             window.localStorage.a = 'abc';
  15.             console.log(window.localStorage);
  16.         });
  17.     </script>
  18.     <script src="http://10.68.124.176:8082/target/target-script.js"></script>
  19. </body></html>

  d. 在data.json文件中随便填入一些json格式的数据，至此实验环境已经搭建完成。
  打开后的DebugClient如下图：

weinre调试接口

  首页RemoteTab由三部分组成， Targets是注册的远程设备列表， 当前我们还没有访问测试页面， 所以Targets列表为none， Clients是Weinre客户端， 也即打开这个Weinre页面的设备列表。ServerProperties就是我们运行Weinre时的一些配置项。

  运行grunt后， 浏览器会自动打开网页http://0.0.0.0:9000, 因为我们在Gruntfile中设置了hostname为0.0.0.0， 这个设置是为了让外部ip访问这个文件服务，这时我们在浏览器地址栏将0.0.0.0改为我们电脑的ip， 然后用手机访问这个链接， 例如我的链接是http://10.68.124.176:9000, 这样就可以在Targets列表中看到我们手机的ip地址， 证明手机链接上了Weinre服务。如果有多个设备访问这个网页， 那么Targets列表就会将这些设备的ip都列出来， 默认情况是蓝色显示列表项， 如果需要调试某个设备的页面， 那么可以在Target列表中点击那个设备的对应的列表项， 可以看到当点击后， 该项变为绿色表示选中， 此时测试的就是选中设备的页面。

1.2 Weinre用户接口与功能介绍

  接下来将从以下几个方面介绍Weinre工具的使用：调试DOM/CSS， 调试Ajax请求， 本地存储的使用， Console的使用， 这几方面分别对应着Weinre工具的ElementsTab, NetworkTab, Resources-Tab, ConsoleTab。
Weinre面板

  在进入调试步骤前，要确保我们选中正确的Targets，如下图，选择待调试设备的ip，选中会显示绿色，蓝色是未选中。

选中Target

  • 调试DOM/CSS

  切换至ElementsTab， 可以看到调试页面的html结构， 如果看不到或者不是需要的页面， 有可能是Targetslist中的目标设备选择的不正确。在这里我们就可以像调试本地页面一样的修改这个文件,可以修改DOM结构也可以修改元素样式。例如：当我们在ElementTab中选中h1标签时， 手机上我们可以看到h1元素被高亮框圈了起来， 此时我们给h1元素设置字体颜色为红色，就可以看到手机上的”ABC”变为了红色。

  a. ElementTab选中h1标签：

1. 初识Weinre - 图11

  a. 选中时手机的页面的效果：

1. 初识Weinre - 图12

  b. 将字体颜色修改为红色：

1. 初识Weinre - 图13

  b. 修改后手机上的页面效果：

1. 初识Weinre - 图14

  • 调试Ajax请求

  切换至NetworkTab, 在这里可以看到我们发送的ajax请求， 如我们搭建环境时使用到的html页面， 在页面中， 请求了一个data.json的数据文件，当页面加载完成后就可以看到在NetworkTab中有一条请求data.json的数据， 这个与我们平时调试本地页面一样， 不同的只是这里不能显示页面加载资源的情况， 比如页面中引入的js, css, img文件的加载情况， 所以如果资源加载错误， 在这里是无法看出来的。 值得一提的是， ajax显示的收据也仅限于远端页面已经与Weinre链接建立成功后的请求。请求结果如下图：

NetworkPanel

  • 本地存储的使用

  切换至ResourcesTab， 这是对应本地调试工具的一个缩减版， 可以看到只有Database, Local Storage与Session Storage三项， 我们的例子还是使用上面的index.html， 其中有一处使用了localStorage存储， 运行后， 我们可以切换到LocalStorage项， 在里面就可以看到我们写入的值了， 如下图：

ResourcePanel

  • Console的使用

  切换至ConsoleTab， 这里基本与本地调试时console的功能一致， 可以输入执行一些js代码， 也可以显示console输出的信息。以index.html为例， 可以看到如下图的输出：

ConsoleTab

Ajax请求与Console的输出要发生在Target连接成功之后才能看到结果，所以如果上面的例子看不到结果，可以加入setTimeout给console.log一个延时。