Apple has brought its expertise in Mac OS X and iOS development tools to the web. Safari includes a powerful set of tools that make it easy to modify, debug, and optimize a website for peak performance and compatibility. To access these tools, enable the Develop menu in Safari's Advanced preferences.

Develop Menu

All of Safari's powerful developer tools are easily accessible from the Develop menu. The Develop menu contains a wealth of tools that you can use for web page manipulation and debugging.

Web Inspector

The Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. Whether you're viewing the structure of a page, debugging JavaScript, or optimizing performance, the Web Inspector presents Safari’s developer tools in a clean, unified interface designed to make developing web applications more efficient.

• 

  Elements Pane

  Take a closer look at your web page structure with the Elements pane. The Elements pane makes it easy to examine and edit the DOM or CSS rules for your page. You can also see which event listeners are attached to any element, and dynamically view CSS color values in all possible formats.

• 

  Resources Pane

  The Resources pane cleanly displays all of your web page resources and graphs the order and speed in which they are loaded over the network. You can sort this data by size, or by loading parameters such as latency, response time, and duration.  Small graphic loading slowly? You could have a network bandwidth problem. Long latency? It may be a server response issue. Graphic not being requested until after another resource is loaded? Time to modify your code so these resources load in parallel. Use the Resource pane to troubleshoot long load times and fine tune your site for speed.

• 

  JavaScript Debugger

  Safari's powerful JavaScript Debugger examines your JavaScript code for problems that prevent your scripts from running correctly, such as erroneous syntax or missing separators. You can also debug your code at runtime by adding your own breakpoints or by turning on Safari’s "pause on exceptions" feature, allowing you to isolate and debug specific portions of your code. And you can examine the JavaScript variables and objects as your script executes to more easily track down problems.

• 

  Timeline Pane

  The Timeline pane in the Web Inspector lets you see how your website or web application behaves over time. Loading, Scripting, and Rendering timelines show you how and when your code requests remote resources, executes JavaScript, calculates styles and performs other operations with your web application, making it easy to track down bugs and pinpoint areas for improvement.

• 

  JavaScript Profiler

  Optimize your JavaScript code with Safari’s state-of-the-art JavaScript Profiler. The Profiler lists the performance characteristics of each of your script’s functions, making it easy to pinpoint problem areas and make your web application a top performer.

• 

  Storage Pane

  Safari includes tools for inspecting the HTML5 offline data that will be part of the next generation of web applications. Safari’s Storage pane allows you to view localStorage and sessionsStorage data, inspect SQL database information, and even execute SQL queries from a command-line interface. You can also see cookie information for all domains accessed on the page you’re viewing.

• 

  Console Pane

  The new Console pane makes debugging easier. You can now see the Web Inspector console in a full-window view, making it easier to assess the JavaScript errors and warnings in your site. You can type JavaScript expressions in the Error Console, and Safari will evaluate them as if they appear in the source page. Scope buttons let you filter information by errors, warnings or logs.

Snippet Editor

The Snippet Editor makes it easy to test experimental pieces of HTML markup. Just enter the code into the editor and Safari renders the results immediately.