safari调试工具h5手机_教科书式的移动端真机调试方法总结

前言：无调试，不前端

业务简介：最近要分析web页面，在安卓和ios上的性能差异，除了操作系统本身不同之外，应该还多地方要探究的，第一步就是要在真机上分析，所以总结一下几个方法。

一、iPhone版

设备

• Mac+iPhone+Lightning+Safari浏览器

步骤

• 1.使用Lighting线将Mac与iPhone相连
• 2.iPhone打开Web检查器(设置->Safari->高级->Web检查器)
• 3.iPhone用Safari打开要进行分析的页面
• 4.Mac打开Safari浏览器(菜单->开发->对应的手机名称->要调试的页面)，点击即进入Safari Developer Tools，如图：