利用Mac的Safari来调试iPhone的移动浏览器环境

前端在调试爷们在移动端设备的兼容性问题或bug的时候,往往不大方便。这里介绍如何利用Mac的Safari来调试iPhone的浏览器环境。

设备

我使用的配置设备如下:
Mac: macOS Sierra 10.12.5
iPhone 5s: iOS 10.3.2

操作

iPhone开启Web检查器

iPhone中依次打开如下功能:设置->Safari->高级->开启Web检查器
如下图:

Mac的Safari开启开发功能

进入Safari的偏好设置->高级->勾选在菜单栏中显示“开发”菜单
如下图:

调试

使用iPhone的Safari打开网站(nekomiao.me)
然后Mac的Safari顶部“开发”菜单中,选中你iPhone设置名称的Safari选项,如下图:

这样子,就可以在Safari的开发者工具中调试iPhone中的浏览器环境,如下图: