澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

运动Web远程调节和测量检验工具,调节和测量试

2019-08-17 作者:澳门新萄京赌场网址   |   浏览(155)

移动前端调试页面–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最大的特点是在PC上远程调试移动网站及 PhoneGap 应用 全称是远程 Web 调试工具 功能与Firebug类似 不仅可以调试调试 DOM 元素 CSS 样式 和 JavaScript 还可以监听网络请求

在移动端开发中,开发过程通常是先用chrome的手机浏览器模拟器模拟开发页面在手机浏览器中的显示。但是通常由于浏览器自身的实现方式页面解析方式不一样,往往在模拟器上显示正常的页面,在真是移动端浏览器中显示异常。包括一些事件触发动作也得不到很好的调试。
下边介绍几个月的h5开发总结出来的移动端调试方式:

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

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

① 安装
由于Weinre是基于node.js实现 安装前需要安装Node
之后便可以通过npm命令安装Weinre

1.log方式

通过console.log()方式,将代码执行关键过程输出出来,基本可以定位问题出现位置,但这种方式对于页面样式问题无能为力;

 

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

npm -g install weinre

2.chrome模拟器调试

还是要介绍下chrome的模拟器调试(万一有人不知道呢~),其实这是最长用的开发调试方式了,对于大部分浏览器webkit内核浏览器适用,关键还可以选择各种机型;

一:远程调式工具—weinre

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

② 使用
weinre安装完成后 便可以使用weinre命令启动服务器 weinre提供了以下参数

正确的打开方式

打开chrome浏览器windows按F12、mac按option command i 进入开发者工具界面,于是,任性地调试啦~

澳门新萄京官方网站 12

chrome开发者工具

Weinre是什么?

澳门新萄京官方网站 13澳门新萄京官方网站 14

boundHost:  -all-
httpPort:  8081
reuseAddr:  true
readTimeout:  1
deathTimeout: 5

3.Weinre

Weinre 是<strong>WE</strong>b <strong>IN</strong>spector <strong>RE</strong>mote.是一个web页面调试工具和检查工具,通过weinre可以PC和手机,在PC中操作页面跟手机操作一样,完成页面的调试。

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客户端进行调试。

常用的参数只有两个

weinre安装使用

 

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

--httpPort 调试服务器端口 默认是8080
--boundHost 调试服务器绑定的 IP 地址或域名 默认localhost
 如果指定为-all- 表示绑定到当前机器可以访问的所有IP

(1)安装

sudo npm -g install weinre

二: 安装weinre

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

启动服务器

(2)启动

weinre --httpPort 8081 --boundHost -all-
启动成功,访问地址http://localhost:8081/
如图:

澳门新萄京官方网站 15

weinre启动成功

在 cmd 面板中键入以下代码

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

weinre --httpPort 9090 --boundHost -all-

(3)web页面引入脚本,项目启动

将生产的javascript 标签引入自己开发的web页面中,启动项目;
http://10.242.101.173:8081/target/target-script-min.js#anonymous

Example:
<script src=";

npm install -g weinre

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

httpPort尽量不要占用8080 以免与你的项目端口冲突

(4)调试

页面跑起来以后通过访问http://10.242.101.173:8081/client/#anonymous
就可以看到所有访问这个页面的手机啦

澳门新萄京官方网站 16

查看weinre中页面访问情况

澳门新萄京官方网站 17

通过pc可以控制移动端浏览器看到的页面,修改吧~

 澳门新萄京官方网站 18

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

启动完成后 在浏览器中访问http://localhost:9090/

4.chrome移动端远程调试

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

澳门新萄京官方网站 19

weinre服务器首页

使用步骤:

(1)手机、PC都有chrome浏览器;
(2)数据线连接PC和手机,手机开启调试模式;
(3)chrome浏览器地址栏输入chrome://inspect,就可以调试手机版的chrome页面啦

澳门新萄京官方网站 20

chrome远程调试

现在需要执行如下命令:

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

在页面中找到Target Script
Target Script表示你要调试的页面
在页面中引入target-script-min.js 如下:

5、微信web开发者工具

微信今年推出了 web 开发者工具,能够帮助开发者更方便、更安全地开发和调试基于微信的网页,它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。
通过微信web开发者工具可以:

  • 使用自己的微信号来调试微信网页授权
  • 调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出
  • 使用基于 weinre 的移动调试功能
  • 利用集成的 Chrome DevTools 协助开发

weinre –boundHost 172.16.28.162

[plain] view plain copy

 <script src="http://localhost:9090/target/target-script-min.js#anonymous"></script>

使用步骤

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

澳门新萄京官方网站 21在CODE上查看代码片澳门新萄京官方网站 22派生到我的代码片

之后在手机中访问调试页面
回到weinre首页 找到Access Points -> debug client user interface
点击链接 http://localhost:9090/client/#anonymous

(1)下载微信web开发者工具

澳门新萄京官方网站 23

npm -g install weinre //安装weinre

澳门新萄京官方网站,Targets

(2)安装打开,并登录调试;

界面如下图所示,想进行页面调试首先需要登录,如果只是模拟器上调试页面内容,在地址栏直接输入网址;通过js-sdk可以看到微信微信分享之后的各个字段内容;点移动调试按钮按按步骤设置一下手机代理即可,甚是方便;

澳门新萄京官方网站 24

微信web开发工具

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

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

Targets表示所有调试的页面

6、UC浏览器开发者版

UC浏览器总是时不时报出奇奇怪怪的问题,而其他浏览器又不会出现这种问题,所以很郁闷但又无能为力,我也是最近才知道原来UC浏览器有开发者版本哦;

澳门新萄京官方网站 25

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

调试页面

主要功能

  • DOM查看和修改
  • JavaScript调试、CSS调试
  • 网络状态查看
  • 资源文件查看
  • Console控制台

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

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

为了方便看到效果 我是通过PC浏览器的访问的调试页面
当鼠标悬浮在元素之上时 便可以在手机端看到右侧效果
并可以看到CSS

正确的使用方式

(1)进入UC官方网站开发者中心(网站地址),下载Android平台的UC浏览器开发者版,安装到手机中。
(2)PC机一台,并在PC上安装Chrome或Safari(推荐使用Chrome)。支持Chrome15–Chrome21,以及Safari5.1.4以上版本。下载ADB工具到PC中。

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

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

欢迎关注微信个人订阅号:DevTipss

参考

Weinre Home
chrome手机端调试
微信web开发者工具开发文档
UC浏览器开发者版本文档

澳门新萄京官方网站 26

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

DevTips.jpg

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

澳门新萄京官方网站 27

本文完~~~

 

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

 

澳门新萄京官方网站 28

 

新建/编辑系统变量Path,设为;%JAVA_HOME%bin;%JAVA_HOME%jrebin

JavaScript

澳门新萄京官方网站 29

 

然后打开命令提示符,输入java –version 如果出现版本号,则表示安装配置正确。

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

澳门新萄京官方网站 30

 

然后进入weinre的解压路径,在命令提示符窗口运行以下命令:

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

[plain] view plain copy

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

澳门新萄京官方网站 31在CODE上查看代码片澳门新萄京官方网站 32派生到我的代码片

澳门新萄京官方网站 33

java -jar weinre.jar --httpPort 8910--boundHost -all-

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

澳门新萄京官方网站 34然后在Safari浏览器地址栏输入 : 显示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, 如果页面超过这个时间都没有任何响应, 那么就会断开连接。更多参数可以访问 OS X系统更为简便,无须命令行,直接运行app即可启动weinre,后续的步骤和windows相同。Debug服务端所在的内网IP地址可以在命令提示符中输入ipconfig命令查看澳门新萄京官方网站 35

澳门新萄京官方网站 36

然后我们使用服务端所在IP地址加端口访问:

如下:

澳门新萄京官方网站 37TargetScript将上图中Target Script部分的js地址加入到你要调试的目标页面内。例如:<script src=";

澳门新萄京官方网站 38

然后在移动设备打开添加过这个脚本的网页,例如我的页面放在本地环境并使用端口8888监听,所以在移动端浏览器需要输入:

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

。并在桌面环境Safari浏览器打开Debug 客户端用户接口。如下图:

四:多用户

澳门新萄京官方网站 39

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

如果桌面电脑用USB数据线连接了移动设备,但Debug客户端依然显示为weinre:targetnot connected,如下图所示:

比如上面的代码引用:

澳门新萄京官方网站 40

 

这时你可以尝试以下方法:

 

  1. 检查是否通过USB数据线连接成功。

  2. 检查Debug客户端桌面环境是否和移动设备处于同一个局域网网段,尤其是WiFi方式上网的情况,一定要防止Wifi自动连接到其他网络中。

  3. 尝试将Target Script 脚本放在html文件的尾部。

  4. 检查Debug调试客户端用户接口的Client id是否与目标页面内target script 中的client id一致。

 

Target Bookmarklet

 

使用此方法可以将标签中的代码注入到目标页面代码中。以下是JavaScript代码段:

 

javascript:(function{e.setAttribute("src",";

JavaScript

该代码段可以通过在手机端浏览器访问对应的url方式获取。例如这里是:

 

PhoneGapWebApp调试PhoneGap WebApp也就是运行在移动设备Webview之内(Android:webview,iOS:uiwebview)的移动应用,因此weinre调试只需要在要调试的目标页面中加入weinre脚本代码即可。另外可以安装使用GapDebug应用,GapDebug是一款跨平台的移动设备调试工具,支持拖拽式一键安装,支持重启App后Debug状态恢复,支持断点调试,支持Windows和Mac OS系统,官方地址

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

多用户调试Debug客户端用户接口#号后是一个调试客户端的id,用于在多用户调试时,识别各自不同的调试项目。在同一局域网的网段内,大家可以共享weinre调试环境。有一台电脑作为Debug服务器,其他成员只需要一个自己的client id就可以在自己的电脑上开始真机调试了。使用方法同上,这里不再赘述。

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

Debug客户端中调试方法

操作如下:

如果调试设备连接成功,会显示如下状态:

澳门新萄京官方网站 41

澳门新萄京官方网站 42

澳门新萄京官方网站 43

Elements面板

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

澳门新萄京官方网站 44

澳门新萄京官方网站 45

可以修改html和CSS代码,无须刷新页面,即可在目标设备页面上实时预览效果。

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

Resources面板

运动Web远程调节和测量检验工具,调节和测量试验移动端页面。 

澳门新萄京官方网站 46

包括Databases、Local Storage和Session Storage信息,若目标页面用到了缓存,则可以在此看到数据。

Network面板

澳门新萄京官方网站 47

由于weinre是基于XMLHttpRequest进行监听的,所以网络面板只显示通过XML HTTPRequest的请求加载的数据,也就是Ajax方式加载的资源。

Timeline面板

澳门新萄京官方网站 48

Console面板

澳门新萄京官方网站 49

第三方Weinre服务

技术团队可以按照上述步骤搭建一个本地的weinre调试环境,供团队内部使用。除了自建weinre服务器,也可以使用第三方提供的weinre服务。

目前国外的有PhoneGap提供的weinre远程服务,用户可以访问下述网址参看用户远程调试接口

澳门新萄京官方网站 50方法和上面自建weinre服务没什么区别,这里就不多说了。

其他调试工具

除了介绍过的Chrome 远程调试工具DevTools、weinre远程调试,目前的还有Adobe公司推出的跨平台调试工具Adobe Edge Inspect CC,以及国内网易前端工程师@听奏同学开发的iOS系统专用调试工具MIHTool,也是功能很强大的。这里不一一介绍了。

参考文章:weinre – Running

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:运动Web远程调节和测量检验工具,调节和测量试

关键词: