移动前端调试页面–weinre

2015/07/30 · HTML5 ·
weinre,
调试

原文出处:
涂根华的博客   

一:远程调式工具—weinre

Weinre是什么?

Weinre是Web Inspector Remote的缩写(远程web检查器),它的作用就是相当于chrome的审查元素一样,界面和用法也基本一样,无非不同的是:weinre适合在移动端页面调试,比如手机访问页面的时候,我们可以使用chrome浏览器查看页面的html元素和css代码,我们可以对此进行更改,然后在手机端不需要刷新,立即可以看到效果;在移动端调式html和css比较方便。目前weiner也发布到npm上,我们可以使用npm进行安装;npm如下: 

二: 安装weinre

npm install -g weinre

1
npm install -g weinre

图片 1

安装完之后,需要在本地开启一个监听服务器,比如我现在的IP地址是:172.16.28.162

现在需要执行如下命令:

weinre –boundHost 172.16.28.162

可以开启本地监听服务器如下:

图片 2

如上面网址 http://172.16.28.162:8080  weinre默认使用8080端口,我们也可以使用如下命令进行更改端口号;如下命令:

图片 3

三: 访问weinre及在页面上调用

打开浏览器,访问如下地址: 172.16.28.162:8081 如下:

图片 4

如上截图页面;我们需要在调式的页面中加入远程调式所需要的JS代码即可,比如上图截图的最后一句JS代码:

JavaScript

<script src=”;

1
<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

引入到需要远程调式页面即可;

我们现在先访问页面 http://172.16.28.162:8081;如下所示:

图片 5

现在我们继续使用我手机来访问我本机上的网页后,在查看刚点击进去后的页面显示如下:

图片 6

如下:

图片 7

但weinre可以方便我们调式HTML元素及css代码,至于JS,我们可以使用Fiddler替换即可满足前端在移动端基本调式了;

四:多用户

Weinre的默认使用中,都是用anonymous作为id的;

比如上面的代码引用:

JavaScript

<script src=”;

1
<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

但是如果多个用户同时调式各自的页面会有问题,weinre使用多用户机制解决该问题。Weinre默认支持多用户的,这样一个局域网同事只需要一台电脑上安装weinre即可,不需要每个人都安装,多个用户同时使用时,每个用户使用自己的id来区分,每个用户调式信息可以独立,不会相互影响;

操作如下:

图片 8

图片 9

然后继续刷新设备中的页面,然后在电脑端就可以看到如下信息:

图片 10

就可以进行多用户调式了;

2 赞 2 收藏
评论

图片 11

相信很多前端的小伙伴一定会遇到一个问题,
比如我编写完一个页面,某个地方需要进行调整细节或者是哪个地方怎么调整都不对,在pc端还好,有google,firefox之类可以调节页面的工具,虽说这些工具有模拟手机的页面的功能,但是毕竟
真机上调试与浏览器上调试还是有挺大差别的,那有人会问了,有没一款可以针对
移动端调试的工具呢,答案是肯定的。

原文地址:

weinre
就能比较好的解决这个问题的,下面我们就来了解下怎么用 weinre调试移动端页面吧

在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某系统浏览器下页面怎么怎么滴。看着满满的测试汇总文档,我们曾经在一个又一个知名或不知名的手机终端上重复着这些工作:仔细的排查代码,alert可疑的变量,甚至不惜重构来尝试解决这种不一致的问题。虽然说Android
4.0+以上的移动设备支持桌面版Chrome远程调试,而且在Android
4.4以下也仅限于预览Chrome手机版浏览器内部效果,我们无法在问题浏览器下实时联调。此时我们往往无奈地将这些问题归为浏览器兼容性bug。我们暗暗思想着,要是手机端浏览器有个类似Firebug的调试工具就好了!现实不是!移动互联网时代,浏览器发展的趋势、浏览器调试工具发展的未来一定是基于移动端调试的便利性、远程调试的广泛支持。我们大胆预言,支持多终端跨设备跨浏览器的远程调试工具将会越来越多。

 

Weinre(WebInspector Remote)是一款基于Web
Inspector的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Weinre,在PC上可以即时修改目标网页的HTML/CSS/JavaScript,调试过程可实时显示移动设备上页面的预览效果,并同步显示设备页面的错误和警告信息,可以查看网络资源的信息,不过weinre不支持断点调试。该项目目前是
Apache Cordova 的一部分。

一:远程调式工具—weinre

weinre工作原理两张图读懂Weinre的工作机制:

Weinre是什么?

图片 12图片 13

Weinre是Web Inspector Remote的缩写(远程web检查器),它的作用就是相当于chrome的审查元素一样,界面和用法也基本一样,无非不同的是:weinre适合在移动端页面调试,比如手机访问页面的时候,我们可以使用chrome浏览器查看页面的html元素和css代码,我们可以对此进行更改,然后在手机端不需要刷新,立即可以看到效果;在移动端调式html和css比较方便。目前weiner也发布到npm上,我们可以使用npm进行安装;npm如下: 

上述三层结构示意图的含义:Debug客户端:本地的WebInspector,远程调试客户端。Debug服务端:本地的HTTPServer,为Debug目标页面与Debug客户端建立通信。Debug目标页面:被调试的页面,页面已嵌入weinre的远程js。客户端、目标页面与Debug服务端之间使用XMLHttpRequest
进行HTTP通信,你通常的使用情形是将Debug客户端与服务端搭建在桌面开发环境,Debug目标页面放在移动设备。由于Weinre的debug客户端是基于Web
Inspector开发,而Web
Inspector只兼容WebKit核心的浏览器,所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。

 

我在Chrome
38/39版本测试时打开Debug客户端出现页面白板,原因未知,了解原因的欢迎留言给我。换为Safari浏览器打开则正常。

二: 安装weinre

Weinre系统支持性iOS 3.1.3或更低版本不支持webOS 1.45或更早版本不支持

在 cmd 面板中键入以下代码

Debug客户端支持的平台weinre的Mac程序 – Mac OSX 10.6 64-bitGoogle
Chrome 8及以上版本浏览器Apple Safari 5及以上版本浏览器

npm install -g weinre

Debug目标页面支持的平台Android 2.2+系统浏览器Android 2.2+
中的phonegapiOS 4+ 的safari浏览器BlackBerry v6.x
模拟器webOSchrome8+safari5+

 图片 14

关于Weinre的Java版本下载地址无法访问的问题,借用skyhh同学的话,是由于weinre被PhoneGap收购,PhoneGap又被Adobe收购,Adobe收购PhoneGap后,把PhoneGap捐给了Apache,Apache把PhoneGap放在Cordova的项目中。Weinre也从最初的Java移植到了当前的JavaScript。在GitHub上搜索weinre的结果中前两个就是官方的Weinre项目。

安装完之后,需要在本地开启一个监听服务器,比如我现在的IP地址是:172.16.28.162

图片 15

现在需要执行如下命令:

先说第二个项目,是Apache后来推出的JavaScript版本weinre,需要在nodejs环境下安装使用,使用npm包管理工具也可以直接下载安装。安装与服务启动命令如下:

weinre –boundHost 172.16.28.162

[plain] view plain copy

可以开启本地监听服务器如下:

图片 16在CODE上查看代码片图片 17派生到我的代码片

图片 2

npm -g install weinre //安装weinre

如上面网址 http://172.16.28.162:8080  weinre默认使用8080端口,我们也可以使用如下命令进行更改端口号;如下命令:

weinre –boundHost [hostname | ip address |-all-] –httpPort [port]
//启动weinre

图片 3

机器上有nodejs开发环境的同学到此即配置完毕,没有nodejs环境的继续往下看。

三: 访问weinre及在页面上调用

第一个项目pmuellr/weinre是Java版的,目前项目已经转移到

打开浏览器,访问如下地址: 172.16.28.162:8081 如下:

其余的项目有的是Grunt下的解决方案,感兴趣的可GitHub自行查看。

图片 4

安装Java版本的weinre需要有Java开发环境。首先安装JDK,并设置环境变量。新建系统变量JAVA_HOME,设为安装目录D:Program
FilesJavajdk1.6.0_43

如上截图页面;我们需要在调式的页面中加入远程调式所需要的JS代码即可,比如上图截图的最后一句JS代码:

图片 21

 

新建/编辑系统变量classpath,设置为.;%JAVA_HOME%lib;(注意前面的点与分号)

 

图片 22

发表评论

电子邮件地址不会被公开。 必填项已用*标注