作为当今世界的Web开发人员意味着支持一大堆设备和平台，这有时可能被证明是一项艰巨的任务。即使最精心设计的代码符合最新的Web标准，您仍然可以发现您网站的某些部分可能无法按照您希望的方式在某些设备或分辨率上显示或操作。当面临支持如此广泛的场景的挑战时，拥有适合您的模拟工具可能是非常宝贵的。
如果您是使用Mac的众多程序员之一，Safari的开发人员工具集总是派上用场。随着Safari 9的发布，此功能的广度已经大大扩展，主要是由于响应式设计模式，它允许您预览您的网站在各种屏幕分辨率以及不同的iPad，iPhone和iPod touch版本上的呈现方式。
本教程详细介绍了如何激活响应式设计模式以及如何将其用于满足您的开发需求。
Safari首选项
首先，打开Safari浏览器。
点击 苹果浏览器 在浏览器菜单中，位于屏幕顶部。出现下拉菜单时，选择 喜好 在所示示例中圈出了选项。
注意：您可以使用以下键盘快捷键代替上述菜单项： COMMAND + COMMA（，）
05年02月02日显示开发菜单
现在应显示Safari的“首选项”对话框，覆盖浏览器窗口。首先，点击 高级 由齿轮代表并位于窗口右上角的图标。
现在应该可以看到浏览器的高级首选项。底部是一个带有复选框的选项，标有 在菜单栏中显示“开发”菜单 并在上面的例子中圈出来。单击复选框一次以激活此菜单。
05年3月进入响应式设计模式
现在，您的Safari菜单中应该有一个新选项，位于屏幕顶部，标有 开发。单击此选项。
出现下拉菜单时，选择 进入响应式设计模式在所示的例子中圈出。
注意：您可以使用以下键盘快捷键代替上述菜单项：OPTION + COMMAND + R.
05年4月响应式设计模式
现在，活动网页应显示在响应式设计模式中，如上例所示。通过选择列出的iOS设备（如iPhone 6）或其中一个指定的屏幕分辨率（如800 x 600），您可以立即查看该页面在该设备上的显示方式或显示分辨率。
除了显示的设备和分辨率之外，您还可以通过单击分辨率图标正上方显示的下拉菜单，指示Safari模拟其他用户代理（例如来自不同浏览器的用户代理）。
05年05月05日开发菜单：其他选项
除响应式设计模式外，Safari 9的“开发”菜单还提供了许多其他有用的选项，其中一些选项如下所示。
- 打开页面： 允许您在Mac上当前安装的任何其他浏览器中打开活动网页。
- 用户代理： 更改用户代理会导致Web服务器将您的浏览器标识为Safari 9以外的其他内容。
- 连接Web Inspector： Safari 9的Web Inspector显示了所有网页的资源，提供了仔细阅读CSS信息，DOM指标和结构以及本机源代码的功能。
- 显示错误控制台： 这个控制台是开发菜单中使用最广泛的选项之一，它显示JavaScript，HTML和XML错误和警告。
- 显示页面来源： 允许您查看和搜索活动网页的源代码。
- 显示页面资源： 选择此选项可显示当前页面中的文档，脚本，CSS和其他资源。
- 显示片段编辑器： 提供编辑和执行代码片段的功能，而不是完整的页面。从测试的角度来看，此功能非常有用。
- 显示扩展构建器： 允许您通过相应地打包代码并附加元数据来构建自己的Safari扩展。
- 开始时间线录制： 记录许多项目，包括网络请求，JavaScript执行，页面呈现以及WebKit检查器中可查看的用户定义时间段内的其他事件。
- 空缓存： 单击此选项可删除Safari中存储的所有缓存，而不仅仅是标准网站缓存文件。
- 禁用缓存： 禁用缓存后，每次发出访问请求时都会从网站下载资源，而不是使用本地缓存。
- 允许来自智能搜索字段的JavaScript： 出于安全原因，默认情况下禁用此功能，您可以在Safari的地址栏中输入包含JavaScript的URL。
- 将SHA-1证书视为不安全： 安全散列算法的简称，SHA-1散列函数已被证明不如最初想象的安全，因此在Safari 9中添加了此选项。
