移动端代码调试：真机远程代码调试

一、什么叫真机远程代码调试：

设置移动端设备连接开发主机，从开发主机上发现设备并检查和调试移动端上的实时内容

二、准备工作：

1、真机：IOS,Android

2、开发主机：macOS，Windows

3、调试工具：Safari Developer Tools,Chrome DevTools

4、USB数据线：用于连接手机和开发主机

三、连接你的IOS真机设备

1、在手机上开启网页检查器

设置->Safari 浏览器->高级->开启网页检查器

2、开启Safari上的Develop功能

菜单->Preferences->Advanced

3、使用数据线连接手机和开发主机-信任此电脑

4、打开devTool

Develop ->  你的ios设备  ->要调试的页面

四、连接你的Android真机设备

1、在手机上开启USB调试功能

设备->开发者选项->USB调试

2、使用数据线连接手机和开发主机

3、打开Chrome DevTools

在地址栏输入chrome://inspect

确保开启了Discover  USB devices

4、找到目标页面开始调试

五、在开发主机上调试的一些技巧：

Chrome Devtool调试技巧：

1、高亮页面上被重绘的部分，可以检查性能

2、捕获页面上动画，可用于调试动画效果

六、Windows下利用Chrome调试IOS设备页面：

1、在Windows笔记本电脑上安装iTunes： https://www.apple.com/cn/itunes/download/

安装后，您的Windows笔记本电脑才能成功和iOS设备连接并成功识别它

2、在ios设备上，设置->Safari 浏览器->高级->开启网页检查器

3、从github网站下载ios-webkit-debug-proxy-win32：https://github.com/artygus/ios-webkit-debug-proxy-win32

将zip解压到一个文件夹里，然后把这个文件夹加到Path环境变量里

在windows系统的CMD输入：ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html

收到Windows成功监听iOS设备事件的消息：

在浏览器里访问：http://localhost:9221