移动Web远程调试工具,调试移动端页面

活动前端调节和测量试验页面–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

然后继续刷新设备中的页面,然后在Computer端就足以看见如下音讯:

图片 10

就可以打开多客户调式了;

2 赞 2 收藏 评论

图片 11

信任广大前端的同伴一定会碰着三个标题, 比方作者编写完一个页面,某些地点供给张开调节细节也许是何处怎么调节都畸形,在pc端幸而,有google,firefox之类能够调整页面包车型客车工具,虽说这个工具有模拟手提式有线电话机的页面包车型地铁功能,可是毕竟真机上调度与浏览器上调治依旧有挺大差别的,那有人会问了,有没一款能够本着 移动端调试的工具呢,答案是自然的。

原来的小说地址:

Weinre最大的性状是在PC上远程调节和测验移动网址及 PhoneGap 应用 全称是长途 Web 调节和测量检验工具 作用与Firebug类似 不只能够调养调试 DOM 成分 CSS 样式 和 JavaScript 还是能够监听网络央求

weinre 就会比较好的化解这几个题指标,上面我们就来询问下怎么用 weinre调节和测量试验移动端页面吗

在设计员与前端开辟职员的努力下,二个WebApp出炉了,但是测量试验人士说了一群的标题:某某机型下页面表现不相同样,某某系统下页面怎么如何,某某系统浏览器下页面怎么怎么滴。看着满满的测量检验汇总文档,大家早已在三个又二个响当当或不盛名的手提式有线电电话机终端上再也着这么些干活儿:留意的每种核查代码,alert猜疑的变量,以致不惜重构来品尝消除这种不平等的难点。即便说Android 4.0 以上的活动道具辅助桌面版Chrome远程调节和测量检验,何况在Android 4.4以下也只限于预览Chrome手提式有线电电话机版浏览器内部职能,大家爱莫能助在难题浏览器下实时联调。此时我们往往无助地将那个主题材料归为浏览器宽容性bug。大家处之袒然思想着,倘诺手提式有线电话机端浏览器有个类似Firebug的调节和测验工具就好了!现实不是!移动互连网时代,浏览器发展的主旋律、浏览器调节和测量试验工具发展的前途必然是基于移动端调节和测验的便利性、远程调试的布满扶植。大家出入生死预知,帮助多终端跨设备跨浏览器的远程调节和测验工具将会更为多。

① 安装
是因为Weinre是依照node.js完成 安装前供给设置Node
今后便得以通过npm命令安装Weinre

 

Weinre(WebInspector Remote)是一款基于Web Inspector的长间隔调节和测量检验工具,依靠于网络,能够在PC上直接调节和测量试验运维在移动设备上的长途页面,中文意思是长途Web检查器,有了Weinre,在PC上可以即时修改目的网页的HTML/CSS/JavaScript,调节和测验进程可实时展现移动器具上页面包车型大巴预览效果,并共同彰显设备页面包车型大巴失实和警告新闻,能够查看网络财富的音讯,不过weinre不支持断点调试。该项目近来是 Apache 科尔多瓦 的一有个别。

npm -g install weinre

一:远程调式工具—weinre

weinre职业原理两张图读懂Weinre的办事机制:

② 使用
weinre安装完毕后 便能够动用weinre命令运维服务器 weinre提供了以下参数

Weinre是什么?

图片 12图片 13

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

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浏览器张开则符合规律。

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

二: 安装weinre

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

启航服务器

在 cmd 面板中键入以下代码

Debug顾客端扶植的平台weinre的Mac程序 - Mac OSX 10.6 64-bitGoogleChrome 8及以上版本浏览器Apple Safari 5及以上版本浏览器

weinre --httpPort 9090 --boundHost -all-
npm install -g weinre

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

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

 图片 14

有关Weinre的Java版本下载地址不能访谈的难题,借用skyhh同学来讲,是出于weinre被PhoneGap收购,PhoneGap又被Adobe收购,Adobe收购PhoneGap后,把PhoneGap捐给了Apache,Apache把PhoneGap放在Cordova的项目中。Weinre也从先前时代的Java移植到了近日的JavaScript。在GitHub上寻找weinre的结果中前多少个便是法定的Weinre项目。

起步成功后 在浏览器中访谈http://localhost:9090/

设置完以往,必要在本地开启一个监听服务器,比方本身以往的IP地址是:172.16.28.162

图片 15

weinre服务器首页

当今须求执行如下命令:

先说第三个门类,是Apache后来生产的JavaScript版本weinre,供给在nodejs意况下安装使用,使用npm包管理工科具也足以直接下载安装。安装与劳动运转命令如下:

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

weinre –boundHost 172.16.28.162

[plain] view plain copy

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

能够敞开当地监听服务器如下:

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

从此在三弟大中寻访调节和测验页面
回到weinre首页 找到Access Points -> debug client user interface
点击链接 http://localhost:9090/client/#anonymous

图片 18

npm -g install weinre //安装weinre

Targets

如上面网站 http://172.16.28.162:8080  weinre私下认可使用8080端口,我们也足以动用如下命令进行改造端口号;如下命令:

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

Targets表示具备调节和测量检验的页面

图片 19

机械上有nodejs开垦条件的同班到此即计划完结,未有nodejs蒙受的承接往下看。

调养页面

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

率先个项目pmuellr/weinre是Java版的,前段时间项目早已更动来

为了便利寻访效能 小编是经过PC浏览器的访谈的调度页面
当鼠标悬浮在要素之上时 便得以在手提式有线电话机端看见右侧效果
并得以见见CSS

展开浏览器,访谈如下地址: 172.16.28.162:8081 如下:

此外的种类有的是Grunt下的消除方案,感兴趣的可GitHub自行查看。

应接关切微信个人订阅号:DevTipss

图片 20

设置Java版本的weinre须求有Java开荒情形。首先安装JDK,并设置情形变量。新建系统变量JAVA_HOME,设为安装目录D:Program FilesJavajdk1.6.0_43

DevTips.jpg

如上截图页面;大家供给在调式的页面中参预远程调式所需求的JS代码就可以,譬如上海体育地方截图的最后一句JS代码:

图片 21

本文完~~~

 

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

 

图片 22

 

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

JavaScript

图片 23

 

下一场展开命令提醒符,输入java –version 假诺现身版本号,则意味安装配置不错。

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

图片 24

 

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

引进到须求长途调式页面就可以;

[plain] view plain copy

小编们未来先访谈页面 http://172.16.28.162:8081;如下所示:

图片 25在CODE上查看代码片图片 26派生到本身的代码片

图片 27

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

今后大家后续利用作者手机来访谈小编本机上的网页后,在翻看刚点击步向后的页面展现如下:

图片 28然后在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命令查看图片 29

图片 30

接下来我们应用服务端所在IP地址加端口访问:

如下:

图片 31TargetScript将上海体育场地中Target Script部分的js地址出席到您要调解的对象页面内。比如:<script src=";

图片 32

接下来在运动设备张开增加过这几个本子的网页,譬喻作者的页面放在地面情形并使用端口8888监听,所以在运动端浏览器必要输入:

但weinre能够一本万利我们调式HTML成分及css代码,至于JS,大家可以动用Fiddler替换就能够满意前端在移动端基本调式了;

。并在桌面意况Safari浏览器张开Debug 顾客端顾客接口。如下图:

四:多用户

图片 33

Weinre的暗中认可使用中,都以用anonymous作为id的;

即使桌面Computer用USB数据线连接了活动设备,但Debug客户端仍旧显示为weinre:targetnot connected,如下图所示:

诸如上边的代码援引:

图片 34

 

那会儿你能够品尝以下方法:

 

  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调节和测验境况。有一台Computer作为Debug服务器,别的成员只须要一个和好的client id就可以在温馨的微管理器上起来真机调节和测量试验了。使用办法同上,这里不再赘言。

只是假若八个客户同有时间调式各自的页面会有标题,weinre使用多客户机制消除该难点。Weinre私下认可帮衬多客商的,那样二个局域网同事只供给一台Computer上安装weinre就能够,没有须求种种人都设置,三个顾客同一时间接选举拔时,种种顾客使用本身的id来分别,每个顾客调式音讯方可独自,不会相互影响;

Debug顾客端中调护医疗方法

操作如下:

假使调节和测量检验设备连接成功,交易会示如下状态:

图片 35

图片 36

图片 37

Elements面板

接下来继续刷新设备中的页面,然后在计算机端就足以看到如下音讯:

图片 38

图片 39

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

就能够张开多客户调式了;

Resources面板

 

图片 40

满含Databases、Local Storage和Session Storage新闻,若目的页面用到了缓存,则能够在那看见数据。

Network面板

图片 41

出于weinre是依据XMLHttpRequest实行监听的,所以互联网面板只展示通过XML HTTPRequest的伸手加载的多少,也正是Ajax情势加载的财富。

Timeline面板

图片 42

Console面板

图片 43

第三方Weinre服务

工夫公司能够根据上述手续搭建三个地面包车型大巴weinre调节和测量检验境遇,供团队内部使用。除了自行建造weinre服务器,也足以选拔第三方提供的weinre服务。

现阶段国外的有PhoneGap提供的weinre远程服务,客户能够访问下述网站参看客户远程调节和测量检验接口

图片 44办法和上面自建weinre服务没什么分化,这里就比较少说了。

其他调节和测量检验工具

而外介绍过的Chrome 远程调节和测验工具DevTools、weinre远程调节和测量检验,近年来的还应该有Adobe公司生产的跨平台调节和测量试验工具Adobe Edge Inspect CC,以至国内搜狐前端程序猿@听奏同学开辟的iOS系统专项使用调节和测验工具MIHTool,也是效果与利益很强盛的。这里不一一介绍了。

参照小说:weinre – Running

本文由星彩网app下载发布于前端技术,转载请注明出处:移动Web远程调试工具,调试移动端页面

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。