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. 安卓 handler解析

    参考: 1.http://www.2cto.com/kf/201302/190591.html(安卓更新UI的两种方式,handler,Activity.runOnUIThread()) 2.http ...

  2. java系列--HTTP协议

    一.HTTP请求信息 请求行 请求头 空行 消息体 1.防盗链: 枚举类型: 二.中文乱码问题 1.Get提交 String username = request.getParameter(" ...

  3. Tomcat用法--Servlet开发

    本来想玩一下微信公众号开发,没想到学习曲线真是恶心的很,首先你要配置Tomcat--你要会Servlet--你要会JSP,妈的!贴出来 快哭瞎了,各种文档,好吧,提供一个教你搞java EE文档的博客 ...

  4. beforeunload

    <!DOCTYPE html> <html> <head> <title>BeforeUnload Event Example</title> ...

  5. Spring Security——核心类简介——获得登录用户的相关信息

    核心类简介 目录 1.1     Authentication 1.2     SecurityContextHolder 1.3     AuthenticationManager和Authenti ...

  6. LogBack log出力路径

    转自:http://blog.csdn.net/z69183787/article/details/30284391 请看下面这段配置,这是无法工作的: <?xml version=" ...

  7. JS 响应式编程

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script ...

  8. 给Pomelo的聊天室添加time的RPC调用

    为了练手,给聊天应用增加一个rpc调用和一个time类型的服务器,在servers/time/remote/timeRemote.js中,添加如下代码: module.exports.getCurre ...

  9. spring mvc 注解示例

    springmvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  10. 游戏开发之UE4添加角色到场景中

    接着上次继续学习,现在我们已经有了一个场景并且运行了,我们需要添加一个角色到场景中.要这样做,我们必须从UE4的GameFramework类继承它. 一. 创建一个从Character类继承的类 从基 ...