[移动开发]移动端真机调试

一、macbook - iphone - safari真机联调方式

1. iphone - 设置 - Safari浏览器 - 高级 - 打开“网页检查器”
2. Safari浏览器 - 偏好设置 - 高级 - 勾选“在菜单栏中显示‘开发’菜单”?

3. 设置好上面两步后，使用数据线链接电脑和手机。在手机上访问页面，在Safari浏览器的开发菜单下就可以找到访问的链接，然后点击“右侧”链接，就会进入到控制台，可以查看，样式，元素，网格等。

?

?

二、安卓 - chrome 真机联调

很多小伙伴可能不使用 Mac 或者不习惯 Safari浏览器 的开发者工具，没关系，谷歌也有类似的工具，而且更符合大家的使用习惯。有梯子的小伙伴，可以直接看谷歌官方文档。
1）、打开 Android 手机 设置 > 开发者选项 > USB调试。设置里面没有“开发者选项”的，找到关于手机，找到基带版本连续点击五次以上，就会出现“开发者选项”。

2）、通过数据线连接你的电脑和 Android 手机，会弹出一个弹框确认是否链接，点击确定。

3）、给你的 Android 手机下载一个手机版的 Chrome浏览器 (各大应用商店自行搜索)，并在手机上的 Chrome浏览器 中打开你需要调试的页面。

4）、打开你电脑上的 Chrome浏览器 ，输入chrome://inspect/#devices这个链接并打开。里面就会有手机上访问的链接，点击就可以进入调试了。
?

三、使用weinre??

1、weinre安装

 npm -g install weinre

2、weinre使用

1）、启动weinre服务

?启动成功，如下图所示：

2）、打开PC调试页面，使用刚才启动服务的ip和端口号访问

点击上图第一个，可以进入调试页面

?3）、上图所示，还没有可以调试的页面，需要在要调试页面加入一段JS

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

?ip地址和端口号为启动weinre服务的ip地址和端口号

?4）、点击Targets下面的链接，就可以进入到调试页面，可以通过上面的elements查看页面元素

?总结：weinre都是在电脑上操作，不是在手机上，有些在手机上复现的问题，用它也不能定位。