使用Mac Safari Web Inspector Debug

使用Mac Safari Web Inspector Debug Mobile Safari（iPhone or iPad）

配置你的Mobile设备

ios设备打开：
Settings -> Safari -> Advanced

image.png

配置你mac上的safari

image.png

打开 show develop menu in menu bar

用法

• 使用数据线将你的mac和你的ios设备连接
• 在你的mac上打开safari app

image.png

• 此时选中手机，然后连接

开始debug

• 打开mac上的safari

image.png

• 手机打开safari，然后输入网址，保证手机是open 状态

• 在mac上打开safari选中develop

  
  image.png

• 此时会出现

image.png

就可以愉快的debug了

一些使用方案上的补充

当你开始debug的时候看到的是整个页面上的所有element，那么如果我只想要页面上某一个element，只有在手机上我才知道是哪一个？

image.png

• 点击图中的圈圈处，如果圈圈的颜色是绿色，就可以直接在手机上点击你需要的组件，devTool会自动的jump到这个DOM元素

配置过程中出现的问题

• 在mac的safari develop上看到了自己设备并且选择了对应的网址，devTool工具弹出后立即就消失怎么办？

• 将你手机和mac的语言统一（通常将手机的语言调制英语），出现这种问题可能是语言不通导致decode失败