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

当今亟需推行如下命令:

咱俩得以选用npm举行设置。weinre –boundHost 172.16.28.162

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

图片 2

如下边网站 http://172.16.28.162:8080  weinre默许使用8080端口,大家也得以应用如下命令举办改变端口号;如下命令:

图片 3

咱俩得以选用npm举行设置。三: 访问weinre及在页面上调用

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

图片 4

咱俩得以选用npm举行设置。如上截图页面;大家须求在调式的页面中投入远程调式所需求的JS代码就能够,举例上海教室截图的最后一句JS代码:

JavaScript

咱俩得以选用npm举行设置。<script src=”咱俩得以选用npm举行设置。;

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

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

图片 10

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

2 赞 2 收藏
评论

图片 11

相关文章