转载

各种真机远程调试方法汇总

github地址 https://github.com/jieyou/remote_inspect_web_on_real_device

“真机远程调试”（remote inspect web on real device），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页

当前：Oct 27,2014

“真机远程调试”的方法总是在发展，日新月异，有必要在每次更新本文档时标注当前时间及当前相关软件版本

当前最新桌面版Chrome 版本：MAC：38.0.2125.104，PC：未知
当前最新 Android上的Chrome 版本：38.0.2125.102
当前最新 Android上的UC开发人员版版本：9.8.9.457
当前最新 iOS：8.1

总览表格

方法	关键点	实现难度（综合考虑搭环境、软件、硬件成本，分数小为佳）	调试效果（综合考虑仿真效果、能调试的项等，分数大为佳）	可用的桌面设备	可用的移动设备及可调试的浏览器	简要步骤
Chorme模拟器	非真机，只是模拟	0	2（新版本加入了模拟网络链接的功能，故上调评分）	PC、MAC	无	GO
weinre	安装较为繁琐	3	2	PC、MAC	全部	GO
调试Android上的Chrome	需要翻墙	2	4	PC、MAC	Android上的Chrome	GO
调试Android APP里的webview	需要翻墙	3	4	PC、MAC	Android APP里的webview	GO
调试Android上的UC	需要桌面设备和移动设备同一网段	1	3	PC、MAC	Android上的UC	GO
调试iOS上的Safari	需要MAC（甚至可以无需iOS设备）	2	4	MAC	iOS上的Safari	GO

简要步骤

Chorme模拟器

在PC或MAC上打开Chrome浏览器，打开想要调试的页面，然后打开开发人员工具
点击开发人员工具顶栏上的手机图标，即可开始调试（示意图），一般来说需要重新刷新页面
在页面顶部可以看到设备选择下拉菜单 Device 和模拟网络环境的下拉菜单 Network ，及左侧的清除选择按钮和打开关闭 media queries 的按钮（示意图）
打开设置左边的那个类似 >三 的图标，切换到 Emulation 标签，可以更细粒度地调整，来定制化你的模拟（示意图）

weinre

过程稍微繁琐，但是这个方案能调试几乎所有平台的所有浏览器，只要能运行js的就行

安装nodejs
安装weinre到global，即在命令行中运行 npm -g install weinre （MAC可能需要在前面加上 sudo ）
获取本机IP地址（PC：开始→运行→cmd，输入 ipconfig ，查看“IPv4地址”字段； MAC：在网络偏好设置内），假设获取到的IP地址为 4.4.4.4
在命令行运行weinre： weinre --boundHost 4.4.4.4 ，其中IP地址为上一步所获取的地址，如果弹出防火墙，请允许访问（示意图）
在PC或MAC上用浏览器打开 http://4.4.4.4:8080/client/#anonymous ，其中IP地址为第三步所获取的地址（示意图）
将移动设备连接到与PC或MAC同一局域网，打开移动设备上的需要调试的浏览器，然后随便打开一个网页。将它保存为书签
修改上述书签，将地址改成：

javascript:(function(e){e.setAttribute("src","http://4.4.4.4:8080/ target/target-script-min.js#anonymous");document.getElementsByTagName("body")[ 0].appendChild(e);})(document.createElement("script"));void(0);

，其中IP地址为第三步所获取的地址（复制后请去掉代码中的换行，使之成为一行）

在移动设备浏览器上打开想要调试的页面，然后点击上一步保存的书签，即可在PC或MAC上的页面中的target中找到对应页面，点击可以开始调试（示意图）（示意图）

可以考虑在某个机器上搭建一个统一的weinre服务器，供团队成员共用，此方案我尚未尝试
在上述第7步开始，可以不采用书签的形式，而是考虑在代码中引入它提供的调试js文件，如 <script src="http://4.4.4.4:8080/target/target-script-min.js#anonymous"></script> （这种情况适用于不能使用书签的场景，如app内的webview、微信中等，但是上线之前要记得移除这个js的引用）

其他参考链接

http://people.apache.org/~pmuellr/weinre-docs/latest/Installing.html

调试Android上的Chrome

在Android设备上安装Chrome浏览器（版本>=32， https://play.google.com/store/apps/details?id=com.android.chrome&hl=en ）（只有安卓4.0以上才有Chrome）
开启当前Android设备的USB调试
在PC或MAC上安装chrome浏览器（版本>=32）和对应的Android设备驱动（如果找不到，可以在这个列表内尝试）
用USB线连接Android设备，在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车，或通过菜单图标→工具→检查设备，进入调试界面
勾选界面中的 Discover USB devices ，直到搜索到你的Android设备（示意图）
在移动设备上弹出的是否允许远程调试上，选择“允许”
在下面的页面列表（将展示已在Android上的chrome中打开的页面），点击对应的 inspect 开始调试
此时将在桌面版Chrome上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请翻墙后再试（示意图）（一个免费的翻墙服务）

其他参考链接

https://developer.chrome.com/devtools/docs/remote-debugging

调试Android APP里的webview

通过修改代码，在APP内设置允许远程调试（需安卓版本为4.4及以上）：方法，然后安装APP
开启当前Android设备的USB调试
在PC或MAC上安装chrome浏览器（版本>=32）和对应的Android设备驱动（如果找不到，可以在这个列表内尝试）
用USB线连接Android设备，在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车，或通过菜单图标→工具→检查设备，进入调试界面
勾选界面中的 Discover USB devices ，直到搜索到你的Android设备（示意图）
在移动设备上弹出的是否允许远程调试上，选择“允许”
在下面的页面列表（将展示已在Android上的chrome中打开的页面），点击对应的 inspect 开始调试
此时将在桌面版Chrome上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请翻墙后再试（示意图）（一个免费的翻墙服务）

其他参考链接

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

调试Android上的UC

在Android设备上安装UC浏览器开发版， http://www.uc.cn/business/developer/ ，点击第一行右侧的“安装包下载”（示意图）
获取Android设备的IP，一般在WLAN设置内，假设为 4.4.4.4
用和手机处于同一网段的PC或MAC访问步骤2获得的IP后加上 :9998 ，如例子中即为 4.4.4.4:9998
在Android设备上弹出的是否允许远程调试上，选择“允许”（示意图），即可开始调试（示意图）

其他参考链接

http://www.uc.cn/business/download/developer.pdf

调试iOS上的Safari

在iOS设备上打开允许调试：设置→Safari→高级→打开”web检查器“
在MAC上打开Safari的开发菜单：顶部菜单栏“Safari”→偏好设置→高级→打开”在菜单栏中显示“开发”菜单
在iOS设备上的Safari浏览器中打开要调试的页面，然后切换到MAC的Safari，在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页，即可开始远程调试（示意图）
如果没有iOS设备，也可以在Xcode中模拟一台，点击顶部“Xcode”→“Open Developer Tool”→“iOS Simulator”即可打开一个iOS设备的模拟器，并且模拟器里面Safari打开的页面，也是能通过上个步骤中MAC上的Safari调试。（示意图）

正文到此结束