Weinre 远程调试移动端页面
Weinre 是一款远程调试工具,使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面,当你的代码已经发布上线,这时候出现了问题,Weinre就可以帮你调试。
调试场景
- 调试页面在手机上。
- 调试工具在PC的chrome
- 手机跟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由三部分组成,
- Targets是注册的远程设备列表, 当前我们还没有访问测试页面, 所以Targets列表为none,
- Clients是Weinre客户端, 也即打开这个Weinre页面的设备列表。
- ServerProperties就是我们启动Weinre时的一些配置项。在手机上打开测试页就可以开始调试了。
可以在Target列表中点击那个设备的对应的列表项, 可以看到当点击后, 该项变为绿色表示选中, 此时测试的就是选中设备的页面。
单击 Elements 按钮,就会看到远程页面的DOM 文档。
与chrome,webkit调试工具类似,各个Tab对应各自不同的功能,可以在主机上随意修改远程网页上的dom、查看资源请求等, 同时在手机对应的调试页面里,查看效果。注意,手机跟Weinre调试工具要在同一个wifi网段下。
weinre缺点:
没有提供JS调试功能。
Weinre 远程调试移动端页面的更多相关文章
- Weinre 远程调试移动端手机web页面
调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...
- Weinre调试移动端页面
Weinre是什么 如果我们做的是Cordova(phonegap)或其他hybird应用,当使用到原生功能时候(类似原生请求数据或页面切换时),没办法在PC chrome浏览器调试页面,一旦页面在手 ...
- grunt、Browsersync服务及weinre远程调试
一.grunt server服务 前端开发时,经常需要把静态文件映射成web服务,传统的做法是丢到apache,但太重太不友好了.开发angular的时候,官方的chrome插件对file:///的支 ...
- 使用 桌面的 chrome 远程调试 Android 的页面
手机浏览器是没有开发者工具的,所以调试手机网页是非常麻烦.使用 chrome 的远程调试功能可以像调试桌面端那样调试手机页面. 准备 手机端:chrome for Android, 安装谷歌浏览器 桌 ...
- 使用weinre远程调试
1.调试环境: 1)使用nodejs搭建调试服务器: 先安装node,然后使用npm安装weinre,在node.js安装目录输入以下命令 npm install weinre 2)需要wifi环境和 ...
- Cordova 5 架构学习 Weinre远程调试技术
手机上的页面不像桌面开发这么方便调试.能够使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装.能够执行: ###npm config set regi ...
- weinre远程调试
一: 关于weinre weinre是一款依赖于nodejs的远程调试工具,现阶段一般用到手机app上调试非常的强大 二: weinre的安装 1) 安装 nodejs以及npm 2) 安装wein ...
- weinre 远程调试 安装 配置
1.第一种方法:安装:npm install -g weinre 2.第一种方法:开启本地监听服务器(修改端口,默认端口是8080):在cmd中运行: weinre --httpPort 8101 - ...
- 移动端页面(css)调试之“weinre大法”
移动端页面调试一般分两步.第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为代理,具体可以参考 如何用 fiddler 代理调试本地手机页面,这样我们就 ...
随机推荐
- HTML5 EventSource的用法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- UVa 10400 - Game Show Math
题目大意:给出n(n<100)个正整数和一个目标数,按照给出数的顺序,运用+.-.*./四则运算(不考虑优先级),判断能否得出所要的结果. 首先考虑的就是暴力枚举,不过时间复杂度为O(4n),会 ...
- Redis 排行榜 自己简单练习
<?php class Ranks{ const PREFIX = 'zhengban'; protected $redis = ''; /* 初始化 */ public function __ ...
- PHP使用JPG生成GIF动画图片,基于php_imagick_st-Q8.dll
PHP使用php_imagick_st-Q8.dll类库,把JPG图片连接生成GIF动画图片,需要事先下载好php_imagick_st-Q8.dll,文件,并配置php.ini文件,启用php_im ...
- GOLang(第二篇 发起一个Http请求)
import ( "net/http" "net/url" ) //发送一个简单的get请求 func GetRequest { //联系使用 make(map ...
- YII 1.0 增删改查
查询 查询多条返回数据集合 //1.该方法是根据一个条件查询一个集合 $admin=Admin::model()->findAll($condition,$params); $admin=Adm ...
- Linux下修改键盘映射
一篇关于修改键盘映射比较靠谱的文章,收藏一下! 原文地址:http://www.07net01.com/2016/04/1436249.html --------------------------- ...
- Windows API 函数浏览
AbortDoc 终止一项打印作业 是 是 ...
- android 快捷技巧
快捷方式 <!--[if !supportLists]-->0. Ctrl + 1 (快速修复) <!--[if !supportLists]-->1. Ctrl + D (删 ...
- Unity 容器教程
文章摘自: http://www.cnblogs.com/qqlin/archive/2012/10/18/2720830.html