新浦京81707con > 注册购买 > 调试移动端页面,移动端Web开发调试之Weinre调试

原标题:调试移动端页面,移动端Web开发调试之Weinre调试

浏览次数:192 时间:2019-05-02

挪动前端调节和测试页面–weinre

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

原来的文章出处: 涂根华的博客   

一:远程调式工具—weinre

Weinre是什么?

Weinre是Web Inspector Remote的缩写(远程web检查器),它的效率就是1对一于chrome的稽审成分一样,分界面和用法也基本同样,无非不一样的是:weinre适合在运动端页面调节和测试,比方手提式有线电话机访问页面包车型客车时候,咱们能够运用chrome浏览器查看页面包车型地铁html成分和css代码,大家得以对此实行改换,然后在手提式有线电话机端无需刷新,立刻能够观察作用;在活动端调式html和css相比较便于。近期weiner也发布到npm上,大家得以应用npm进行设置;npm如下: 

二: 安装weinre

npm install -g weinre

1
npm install -g weinre

图片 1

安装完以往,必要在本土开启一个监听服务器,举例本人今后的IP地址是:17贰.1陆.2八.16贰

今天必要举行如下命令:

weinre –boundHost 172.16.28.162

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

图片 2

如上边网站 http://172.16.28.162:8080  weinre默许使用8080端口,大家也能够选拔如下命令实行改变端口号;如下命令:

图片 3

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

开垦浏览器,访问如下地址: 17贰.1陆.2八.16贰:80八1 如下:

图片 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默许支持多用户的,那样贰个局域网同事只须求1台Computer上设置weinre就可以,没有供给各样人都安装,四个用户同时选用时,各种用户接纳自身的id来差异,每一种用户调式消息能够独立,不会相互影响;

操作如下:

图片 8

图片 9

然后继续刷新设备中的页面,然后在计算机端就能够看到如下消息:

图片 10

就可以张开多用户调式了;

2 赞 2 收藏 评论

图片 11

相信广大前端的同伴一定会遇到一个标题, 比方小编编写完贰个页面,有个别地方需求展开调解细节恐怕是哪些地点怎么调解都万分,在pc端辛亏,有google,firefox之类能够调整页面包车型大巴工具,虽说那个工具备模拟手提式有线电话机的页面包车型地铁法力,然则究竟真机上调治与浏览器上调治依然有挺大差距的,那有人会问了,有没一款能够本着 移动端调节和测试的工具呢,答案是分明的。

原稿地址:

weinre 就会比较好的解决那个标题的,上面大家就来询问下怎么用 weinre调试移动端页面吗

在设计员与前端开采人士的大力下,一个WebApp出炉了,然而测试职员说了一群的标题:某某机型下页面表现不雷同,某某系统下页面怎么如何,某某系统浏览器下页面怎么怎么滴。望着满满的测试汇总文书档案,大家早就在一个又一个名满天下或不著名的手提式有线电话机终端上再度着这一个干活儿:仔细的排查代码,alert嫌疑的变量,以至不惜重构来品尝化解那种不均等的难题。固然说Android 四.0 以上的移位设备接济桌面版Chrome远程调节和测试,而且在Android 四.4之下也只限于预览Chrome手提式有线话机版浏览器内部职能,大家鞭长莫及在难点浏览器下实时联调。此时我们壹再无奈地将那一个主题材料归为浏览器包容性bug。大家视若等闲思想着,假设手提式有线电电话机端浏览器有个类似Firebug的调节和测试工具就好了!现实不是!移动互连网时期,浏览器发展的趋向、浏览器调节和测试工具发展的前途必然是基于移动端调节和测试的便利性、远程调节和测试的周边支持。我们出生入死预感,帮衬多终端跨设备跨浏览器的中距离调节和测试工具将会愈发多。

 

Weinre(WebInspector Remote)是1款基于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/3玖本子测试时张开Debug客户端出现页面白板,原因不详,明白原因的迎接留言给作者。换为Safari浏览器展开则符合规律。

二: 安装weinre

Weinre系统协助性iOS 三.一.三或更低版本不支持webOS 壹.45或更早版本不协理

在 cmd 面板中键入以下代码

Debug客户端帮助的平台weinre的Mac程序 - Mac OSX 10.陆 64-bit谷歌(Google)Chrome 八及以上版本浏览器Apple Safari 伍及以上版本浏览器

npm install -g weinre

Debug目的页面援助的阳台Android 二.2 系统浏览器Android 二.二 中的phonegapiOS 肆 的safari浏览器索爱 v陆.x 模拟器webOSchrome八 safari5

 图片 14

有关Weinre的Java版本下载地址不可能访问的难点,借用skyhh同学来讲,是由于weinre被PhoneGap收购,PhoneGap又被Adobe收购,Adobe收购PhoneGap后,把PhoneGap捐给了Apache,Apache把PhoneGap放在Cordova的项目中。Weinre也从初期的Java移植到了当下的JavaScript。在GitHub上追寻weinre的结果中前七个正是法定的Weinre项目。

设置完今后,须求在地头开启三个监听服务器,举例自身现在的IP地址是:17二.1陆.28.162

图片 15

现行反革命亟需实行如下命令:

先说第二个类型,是Apache后来推出的JavaScript版本weinre,须要在nodejs意况下安装使用,使用npm包管理工科具也得以从来下载安装。安装与服务运行命令如下:

weinre –boundHost 172.16.28.162

[plain] view plain copy

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

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

图片 18

npm -g install weinre //安装weinre

如上边网站 http://172.16.28.162:8080  weinre暗许使用8080端口,大家也足以利用如下命令进行更动端口号;如下命令:

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

图片 19

机器上有nodejs开拓意况的同校到此即布置达成,未有nodejs情形的承袭往下看。

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

第1个品种pmuellr/weinre是Java版的,近年来项目现已转移到

开荒浏览器,访问如下地址: 17二.1陆.2捌.162:8081 如下:

别的的连串有的是Grunt下的消除方案,感兴趣的可GitHub自行查看。

图片 20

安装Java版本的weinre要求有Java开采条件。首先安装JDK,并安装遭逢变量。新建系统变量JAVA_HOME,设为安装目录D:Program FilesJavajdk1.6.0_43

如上截图页面;我们必要在调式的页面中投入远程调式所急需的JS代码就能够,例如上海体育场地截图的最后一句JS代码:

图片 21

 

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

 

图片 22

本文由新浦京81707con发布于注册购买,转载请注明出处:调试移动端页面,移动端Web开发调试之Weinre调试

关键词: 新浦京81707con HTML5 web 教程 Weinre

上一篇:写一个网页进度loading

下一篇:没有了