概述
对于HTML5的开发，大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验，不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式，还能跟踪分析页面资源加载性能等问题。
对于移动平台的开发者来说，从iOS5.0开始，也可以通过Safari的Web Inspector工具连接设备对应用进行调试。
调试效果如图所示：
我们有2种方式，一种是使用xcode iOS模拟器，一种是使用iPhone、iPad、iTouch等真实设备。
如果使用xcode模拟器，可以直接使用safari的控制台debug。
如果使用真机，由于iOS有签名校验机制，正式包不允许safari debug，所以安装在真机上的包必须是测试签名打的包。此时参考如下步骤：
真机调试环境
第一步、开启iOS设备的调试功能
打开“设置”程序，进入“Safari”->“高级”页面开启“Web检查器”：
启动上一步安装的应用，并且打开有webview的界面，并将设备连接到Mac电脑
第二步、开启Safari的调试功能
打开“开发者”菜单
运行Safari,点击“Safari”菜单下面的“偏好设置（Preferences...）”，切换到“高级选项（Advanced）”：
勾选“在菜单栏显示"开发"菜单（Show Develop menu in menu bar）”，关闭偏好设置。
此时在Safari的工具栏出现“开发（Develop）”菜单：
第三步、真机设备连接调试
如果是真机点击“开发（Develop）”弹出菜单会出现设备名称项，进入后显示设备上所有打开的“HTML页面”列表：
此时，点击链接即可以得到。
第四步、Web Inspector调试
打开Web Inspector界面后，即可调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式等操作：
在“源码（Source Code）”模式可在页面左侧添加断点进行调试。
