好记性不如烂笔头，踩的坑记录下来总会有用的

最近在做H5相关的业务。在与H5进行交互的时候。难免会遇到些native与H5传参数，页面布局等会问题需要调试。Apple的safari 浏览器为我们提供了相应的调试工具。

开启safari开发者工具

打开safari 浏览器，在工具栏中找到开发项，如果存在，这一步跳过。

iOS H5页面调试

点击safari浏览器>系统偏好设置>高级>勾选在菜单栏中显示开发菜单

iOS H5页面调试

iOS模拟器调试H5

在模拟器中打开要调试的页面。然后打开safari>开发>模拟器>对应的H5链接。

iOS H5页面调试

这里就可以对H5的页面元素，资源查看，以及js的断点进行调试了。

iOS真机调试H5

这过程大致与模拟器相同。
如果在safari 的开发者找不到真机,你需要打开手机设置>Safari应用>高级>打开web检查器。

iOS H5页面调试

然后就可以像调试模拟器一样调试。