weinre- 调试移动端页面

相信不少前端的小伙伴必定会遇到一个问题， 好比我编写完一个页面，某个地方须要进行调整细节或者是哪一个地方怎么调整都不对，在pc端还好，有google，firefox之类能够调节页面的工具，虽然说这些工具备模拟手机的页面的功能，可是毕竟 真机上调试与浏览器上调试仍是有挺大差异的，那有人会问了，有没一款能够针对 移动端调试的工具呢，答案是确定的。

weinre 就能比较好的解决这个问题的，下面咱们就来了解下怎么用 weinre调试移动端页面吧

 

一：远程调式工具—weinre

Weinre是什么？

Weinre是Web Inspector Remote的缩写(远程web检查器)，它的做用就是至关于chrome的审查元素同样，界面和用法也基本同样，无非不一样的是：weinre适合在移动端页面调试，好比手机访问页面的时候，咱们可使用chrome浏览器查看页面的html元素和css代码，咱们能够对此进行更改，而后在手机端不须要刷新，当即能够看到效果；在移动端调式html和css比较方便。目前weiner也发布到npm上，咱们可使用npm进行安装；npm以下： https://www.npmjs.com/package/weinre

 

二： 安装weinre

在 cmd 面板中键入如下代码

npm install -g weinre

 

安装完以后，须要在本地开启一个监听服务器，好比我如今的IP地址是:172.16.28.162

如今须要执行以下命令：

weinre –boundHost 172.16.28.162

能够开启本地监听服务器以下：

如上面网址 http://172.16.28.162:8080  weinre默认使用8080端口，咱们也可使用以下命令进行更改端口号；以下命令：

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

打开浏览器，访问以下地址： 172.16.28.162:8081 以下：

如上截图页面；咱们须要在调式的页面中加入远程调式所须要的JS代码便可，好比上图截图的最后一句JS代码：

 

 

 

JavaScript

 

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

 

引入到须要远程调式页面便可；

咱们如今先访问页面 http://172.16.28.162:8081;以下所示：

如今咱们继续使用我手机来访问我本机上的网页后，在查看刚点击进去后的页面显示以下：

以下：

但weinre能够方便咱们调式HTML元素及css代码，至于JS，咱们可使用Fiddler替换便可知足前端在移动端基本调式了；

四：多用户

Weinre的默认使用中，都是用anonymous做为id的；

好比上面的代码引用：

 

 

 

 

 

JavaScript

 

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

可是若是多个用户同时调式各自的页面会有问题，weinre使用多用户机制解决该问题。Weinre默认支持多用户的，这样一个局域网同事只须要一台电脑上安装weinre便可，不须要每一个人都安装，多个用户同时使用时，每一个用户使用本身的id来区分，每一个用户调式信息能够独立，不会相互影响；

操做以下：

而后继续刷新设备中的页面，而后在电脑端就能够看到以下信息：

就能够进行多用户调式了；