快捷搜索:
来自 新京葡娱乐场网址 2019-07-08 04:12 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

调整移动端页面,移动前端调节和测量检验页面

一抬手一动脚前端调节和测验页面–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

在 cmd 面板中键入以下代码

weinre 就能够相比较好的缓慢解决这么些难点的,上面大家就来打听下怎么用 weinre调试移动端页面吗

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

一:远程调式工具—weinre

 

图片 12

 

 

JavaScript

如上截图页面;大家供给在调式的页面中插足远程调式所急需的JS代码就能够,比如上海体育场合截图的结尾一句JS代码:

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

就足以拓展多用户调式了;

 

图片 13

图片 14

 

图片 15

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

如上面网站 http://172.16.28.162:8080  weinre暗中同意使用8080端口,我们也能够行使如下命令实行更动端口号;如下命令:

 图片 16

相信广大前端的小同伙一定会高出两个标题, 例如小编编写完一个页面,某些地方必要进行调节细节或然是哪个地方怎么调节都畸形,在pc端幸亏,有google,firefox之类能够调整页面包车型的士工具,虽说那些工具备模拟手提式有线话机的页面包车型客车效用,不过到底 真机上调治与浏览器上调解照旧有挺大差别的,那有人会问了,有没一款能够针对 移动端调节和测量试验的工具呢,答案是早晚的。

大家前几日先访谈页面 http://172.16.28.162:8081;如下所示:

 

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

明天大家承继使用笔者手提式无线电话机来访谈小编本机上的网页后,在查看刚点击步入后的页面显示如下:

Weinre是Web Inspector Remote的缩写(远程web检查器),它的效应便是约等于chrome的甄别成分同样,分界面和用法也基本均等,无非差别的是:weinre适合在移动端页面调试,比方手提式无线电话机访问页面包车型客车时候,我们得以选用chrome浏览器查看页面包车型地铁html成分和css代码,大家能够对此进行改动,然后在小弟大端无需刷新,马上能够看出效果;在活动端调式html和css比较便利。近日weiner也公告到npm上,大家能够运用npm实行设置;npm如下: 

唯独要是三个用户同一时间调式各自的页面会有毛病,weinre使用多用户机制消除该难题。Weinre暗中同意扶助多用户的,那样两个局域网同事只须要一台微型Computer上安装weinre就可以,没有须要各类人都设置,多个用户同期利用时,每一个用户使用自个儿的id来分别,每一个用户调式音信方可独自,不会相互影响;

Weinre是什么?

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:调整移动端页面,移动前端调节和测量检验页面

关键词: