在iOS 6中使用Safari Web Inspector启用远程调试

* 注意：您需要升级到Safari 6.0版才能启用此功能。*

随着iOS6的最新发布，苹果终于推出了一款用于在iOS设备上调试Web应用程序的远程Web检查器。启用它很简单，但它被埋在手机上的几个选项。

在设备上，前往设置 > Safari > 高级

你会发现Web Inspector在那里切换。

Safari浏览器在Safari设置中

启用后，您需要将iPhone或iPad物理连接到Mac。是的，这只是Mac。在Safari的“首选项”窗格的“ 高级 ”下，选中菜单栏中的 “ 显示开发”菜单复选框。

Safari开发菜单

选择开发菜单，您的iDevice应该是一个菜单选项。您现在应该能够检查DOM元素，即时修改CSS，并运行Javascript命令。

iPhone远程调试在行动

作为附注，此过程还将启用对您的PhoneGap（Cordova）和其他基于UIWebView的项目的远程调试。

===============

==================

概述

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

链接：