Safari调试iOS中的js

概述

对于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）”模式可在页面左侧添加断点进行调试。