移动前端调试工具-Weinre真机调试

以前作移动前端调试页面的时候就是简单的使用Chrome模拟器调试，能知足基本基本的需求，后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre，能够在PC端直接调试运行在移动设备上的远程页面，，在PC端能够即时修改目标网页的HTML/CSS/Javascript，调试过程可实时显示移动设备上页面的预览效果，并同步显示设备页面的错误和警告信息，能够查看网络资源的信息，不支持断点调试，听起来是否是很厉害的样子，但真正用起来却很方便。

1.版本选择 

Weinre最先是有Java版本的，所以网上的有些博客是Java版本的实现过程，Java版本在13年的时候已经没有更新，因此会出现一些问题，Weinre官网如今介绍本身说是一个基于NodeJS项目，由于须要本地须要安装Node。weinre是一个命途多舛的项目，最先被PhoneGap收购，后来PhoneGap又被Adobe收购，Adobe收购PhoneGap后把PhoneGap捐给了Apache，Apache把PhoneGap放在Cordova的项目中，Weinre也从最初的Java移植到了当前的NodeJS版本。

2.安装（默认已安装Node，若是没有安装能够参考本人以前博客）

sudo npm -g install weinre

3.获取ip地址（mac环境）

ipconfig getifaddr en0

4.运行weinre

weinre --boundHost 192.168.1.105

5.浏览器中输入http://192.168.168.101:8080便可看到如下页面:

6.手机上访问须要调试的web页面，而后在页面底部插入脚本(最后的#anonymous标题与PC端对应)：

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

 

7.PC端浏览器访问http://192.168.1.105:8080/client/#anonymous页面，能够看到如下效果:

 

对手机端页面实时调试:

 

8.小结：

①有可能会出现页面没法显示页面的源代码，请注意target中的信息，确保手机和电脑在同一局域网内；

②若是出现connection lost请即时刷新页面，若是须要调试时间较长不想丢失连接的话尝试用手机线和电脑连接；

③支持主流Android，iOS以及其余平台，不支持iOS 3.1.3及其更早平台以及webOS 1.45或更早平台；

④关于weinre有其余命令的介绍能够参考官网，以及书签注入的方式查看手机网页大同小异，能够参考官网http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html