苹果已经将其在 Mac OS X 和 iPhone 开发工具中的独有技术带到了 web 开发当中。Safari 包括一组功能强大的工具，可以很容易地修改，调试和优化网站，以获得最佳的性能和兼容性。要访问这些工具，请启用 Safari 高级选项中的“开发”菜单。

开发菜单

Safari 所有的功能强大的开发工具都可以很方便地在“开发”菜单中找到。“开发”菜单包括大量用于网页操作和调试的工具。

Web 查看器

Web 查看器是您的操作中心，您可以通过它快速方便地找到以前包含在 web 浏览器中的丰富的开发工具。无论您查看网页结构，调试 JavaScript，还是优化性能，Web 查看器都会将 Safari 的开发工具呈现在一个干净统一的界面中，从而使 web 应用程序开发更加高效。

• 

  元素面板

  元素面板向您展现更详细的页面结构，可方便您检查文档对象模型 (DOM) 和层叠样式表 (CSS) 的规则。您甚至可以快速修改 DOM 和 CSS，并立即预览所做修改在页面上产生的效果。元素面板的侧边栏向您展示事件监听器。它可方便您快速创建样式规则，并且很容易导航至某条规则加以编辑。

• 

  资源子窗口

  资源子窗口可清楚显示 web 页面的资源和图表从网络加载的次序和速度。您可以通过资源或图表的尺寸或载入参数（例如等待时间、响应时间以及持续时间）对这些数据进行排序。是否小图片加载速度很慢？这可能是网络带宽的问题；是否具有很长的等待时间？这可能是服务器响应的问题；是否其他的资源加载完成后才能请求获取图表？也许是时候要修改代码以便资源并行加载。总之，您可以使用资源子窗口解决加载时间过长的问题，并可以对网站进行精细调整，以便获得满意的速度。

• 

  网络面板

  网络面板向您显示页面资源经由网络进行加载的方式。利用它提供的信息，您可以查看并解决加载时间过长的问题，并可对网站的加载速度进行精细调整。是否由于小图片加载比较慢？如果是，则可能是网络带宽的问题。是否由于其他资源加载完毕后才请求图片？如果是，则您可能需要修改代码，让这些资源并行加载。

• 

  JavaScript 调试器

  Safari 强大的 JavaScript 调试器可以检查您的 JavaScript 代码，找出是什么原因导致脚本无法正确运行，例如语法错误或遗落分隔符等。通过增加断点或打开 Safari 的 "pause on exceptions" 功能，您可以在运行时调试代码，能够隔离出代码的特定部分，对该部分进行调试。当脚本处于执行状态时，您能够查看脚本的变量和对象，这样有利于查找问题。

• 

  时间轴子窗口

  您可以通过 Web Inspector 中的时间轴子窗口查看 web 网站和 web 应用程序的行为随时间变化方式。通过查看加载、执行脚本、渲染页面等行为的时间轴，您可以发现 web 应用程序中的代码在何时以何种方式请求远程资源、执行 JavaScript 脚本、计算样式及执行其他的操作。这些数据可以让查找错误变得更加容易，也有利于您发现细小可改善之处。

• 

  详细资料窗口

  您可以使用 Safari 最先进的 JavaScript 剖析器优化 JavaScript 代码。剖析器能够列出每个脚本函数的性能特征，这样您就更容易发现一些细微的问题，从而让应用程序获得顶尖的性能。

• 

  审计面板

  审计面板是内建的用于测试 web 应用程序性能的手段。您可以运行自动化测试，对网络效用和 Web 页面性能进行检测，从而获得用于优化网站的各种建议。

• 

  控制台子窗口

  新控制台子窗口可以把调试工作变得更轻松。您可以在全窗口视图查看 Web Inspector 控制台，对网站 JavaScript 的错误及警告的评估更加便捷。您可以在 Error 控制台输入 JavaScript 表达式，Safari 会自动对其进行计算，就仿佛它位于源码页面。您还能利用 Scope 按键，基于错误、警告或日志等方式对信息进行过滤。

Snippet Editor

Snippet Editor 可以把实验性的 HTML 标记片段测试变得更容易。您只要在编辑器中输入代码，Safari 就能立即渲染出结果。