http://www.web008.net

【美高梅手机版】调试移动端页面,移动前端调试页面

一举手一投足前端调节和测验页面–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暗中认可扶持多顾客的,那样八个局域网同事只须求风流倜傥台Computer上设置weinre就可以,不需求种种人都安装,八个客户同一时候使用时,各类顾客接纳本身的id来区分,各类客户调式音信能够独自,不会相互影响;

操作如下:

美高梅手机版 8

美高梅手机版 9

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

美高梅手机版 10

就足以开展多客户调式了;

2 赞 2 收藏 评论

美高梅手机版 11

深信广大前端的友人一定会遇上一个主题素材, 例如作者编写完一个页面,有个别地点必要开展调度细节恐怕是哪些地点怎么调节都万分,在pc端幸而,有google,firefox之类能够调剂页面的工具,虽说那么些工具备模拟手提式有线电话机的页面包车型地铁功效,可是终究真机上调解与浏览器上调度依然有挺大差别的,这有人会问了,有没朝气蓬勃款能够针对 移动端调节和测验的工具呢,答案是必然的。

weinre 就会比较好的化解这几个主题材料的,上面大家就来打听下怎么用 weinre调节和测量检验移动端页面吗

 

大器晚成:远程调式工具—weinre

Weinre是什么?

Weinre是Web Inspector Remote的缩写(远程web检查器),它的作用正是也正是chrome的查处成分雷同,分界面和用法也基本等同,无非差别的是:weinre适合在活动端页面调节和测量检验,比方手提式有线电话机访谈页面的时候,大家得以采取chrome浏览器查看页面包车型客车html成分和css代码,大家能够对此张开改动,然后在表哥大端无需刷新,登时能够看看效果;在运动端调式html和css相比较平价。近些日子weiner也透露到npm上,大家能够使用npm实行设置;npm如下: 

 

二: 安装weinre

在 cmd 面板中键入以下代码

npm install -g weinre

 美高梅手机版 12

安装完事后,须求在本地开启二个监听服务器,比方本身未来的IP地址是:172.16.28.162

这两天急需执行如下命令:

weinre –boundHost 172.16.28.162

能够开启本地监听服务器如下:

美高梅手机版 13

如上面网站 http://172.16.28.162:8080  weinre私下认可使用8080端口,我们也能够行使如下命令进行修正端口号;如下命令:

美高梅手机版 14

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

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

美高梅手机版 15

如上截图页面;我们需求在调式的页面中参加远程调式所急需的JS代码就能够,比方上海体育场所截图的结尾一句JS代码:

 

 

 

JavaScript

 

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

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。