移动端真机调试工具--weinre

虽然当前各种浏览器都为开发者提供了很多模拟手机设备的功能，但是模拟毕竟是模拟，模拟环境中正常的代码到了真机上访问，仍旧会有各种样式/方法兼容的问题，最近在尝试使用weinre和微信的web开发者工具的移动调试，进行真机下的样式的调试。

1. weinre

weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

这是官网上的一段介绍，它主要是在手机上浏览相应的web页面，然后在PC上进行调试（Element / Network / Console等）。

（1）weinre安装

- weinre基于node.js，所以电脑上要首先安装有node.js的环境；

- 使用npm安装weinre

 npm -g install weinre

- 安装成功后会有weinre的相关信息。

（2）weinre使用

- 启动服务

1. 获取本机IP地址

Mac    在终端执行 ipconfig getifaddr en0 命令
Window 在命令行执行 ipconfig 命令

2. 启动weinre服务

 weinre --boundHost 172.0.0.1 --httpPort 8081

# --boundHost [hostname | ip address | -all-]: 
   # 默认是'localhost'，用于限制可以访问Weinre Server的设备；
   # 如果设置为-all-或者指定ip，那么任何设备都可以访问 Weinre Server。

# --httpPort [portNumber]: 设置Weinre使用的端口号， 默认是8080

启动成功后会有如下信息展示：

- 打开PC端调试界面：

3. 在浏览器地址栏访问刚刚设置的ip和端口号来访问weinre页面。

4. 在需要调试的目标页面中添加一段script代码

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

5. 进入调试页面

点击页面中的链接进入调试页面：

没有链接时，调试界面展示如下：

targets:none表示当前没有移动设备在访问目标页面，

6. 在移动设备上，打开相应的页面（pc和mobile在同一局域网当中），链接成功后，调试界面会变为如下界面（targets即为目标页面的地址，点击Element即可查看相应的页面元素进行调试）：