About Safari Developer Tools
Safari 4.0 and later includes built-in tools such as Web Inspector, shown in Figure I-1, to help you prototype, analyze, debug, and optimize websites and web apps. Safari 5.0 and later has additional tools you can use to develop and debug Safari extensions.
At a Glance
These tools are built into Safari on OS X, iOS, and Windows. You can enable them in other WebKit-based apps.
Enable the Developer Tools in Safari Preferences
Enable the developer tools in the Advanced pane of Safari preferences:
On OS X or Windows, use Safari preferences to show the Develop menu in Safari. The full set of developer tools are then available.
On iOS devices, use Safari Preferences to enable Web Inspector in Safari. You can then use Web Inspector on OS X to debug web content on your iOS device through a USB connection. For details, see “Enabling and Using Web Inspector in Safari on iOS Devices.”
You can add the developer tools to other Webkit-based Mac apps as a contextual menu by modifying the application’s preferences file. For details, see “Enabling Developer Tools in WebKit-Based Applications Other Than Safari.”
Speed Up Prototyping by Interactively Testing for Errors
If your website has different code paths for different browsers, have Safari give different user-agent strings to test the code branches. Then, verify the behavior changes for Safari, Internet Explorer, Opera, Chrome, or Safari on iOS without having to switch browsers, operating systems, or devices. When you’re ready to open your website in another application, make the switch from inside Safari, without having to quit, open another application, and navigate to your site. For details, see “Changing the User Agent String” and “Switching to Another App.”
Debug Your HTML and CSS Interactively Using Web Inspector
With Web Inspector, you can:
Find Things Fast
Click an element in the DOM and it is highlighted in the browser window. Use the DOM node locator button, which looks like a hand pointing a finger, and click on something in the browser window to highlight the element in the DOM.
Change Things on the Fly
Click an element in the DOM and see its attributes, styles, metrics, and properties, as well as any event listener functions attached to it. Double-click the element to add, delete, or edit attributes interactively. Click the value of a style, property, or metric to modify or disable it. Increment or decrement numeric values using the arrow keys in steps of 1, or with a step of 0.1 or 10 by holding down the Option or Shift modifier keys, respectively. Right-click or Control-click to edit the DOM as if it were HTML in a text editor. Any changes you make are shown immediately in the browser window.
Get it Working in the Browser Before You Change the Source
Make changes without affecting your website, or modify any website inside the browser to better understand how it works or how you could adapt it to your needs. Find problems and fix them on a live website without making a copy to a new site or modifying your production site’s source code. Copy and paste the modified code into your source after it’s fully tested and works exactly the way you want.
See It All
.jsfiles, output from server-side scripts, and code generated on the fly by other code. All the resources are listed. Click a resource in the list to see the source code.
Pause Execution When You Want
Click in the gutter anywhere in the source code view to set a breakpoint, without having to edit the source. Disable breakpoints and re-enable them with a click. Pause any time with a mouse click, without setting a breakpoint.
Continue When and How You Like
Check the call stack, examine variable values, change values while paused, enter and execute test code, then continue, optionally stepping through the code function by function. Step over functions or step out of a function at will.
Use the Interactive Console
Safari implements the same Console API as the popular Firebug debugger. Add test code to your scripts to log branches in the code or print variable values on the fly, without pausing or setting breakpoints. Type commands in the console with auto-completion, and see the results immediately.
Get Help with Cookies, Local Storage, the Application Cache, and HTML5 Client-Side Databases
Use Web Inspector’s Storage navigator to inspect cookies, local key-value storage, the offline application cache, and even client-side relational databases created with HTML5. All local data is displayed in editable data grids. You can perform actions or enter data in the webpage and see the results in the grid, or enter data interactively in the grid itself. Issue SQL queries right from Web Inspector, with auto-completion of SQL functions and database field names. Inspect the contents of the HTML5 application cache to better understand offline application behavior.
Use the Instrument Navigator
Web Inspector’s Instrument navigator shows you exactly where time is spent, so you know where work is needed before you change anything. Once you know exactly where the bottlenecks are, you can make changes interactively without leaving Safari, optimizing your site—and fixing any resulting problems—before you modify your working source.
The Instrument navigator lets you profile your website in real time, showing not only the latency and load time for each resource, but when events occur, as well as the time spent executing scripts, parsing, and rendering. Complex interactions—a script that changes the DOM, causing a resource to load, and a table to be rerendered, for example—are laid out clearly. Header details and memory usage over time are also shown.
See the output in milliseconds or percent of execution time. Sort by execution time. Then spend your effort optimizing code that you know is going to make a significant difference—modify only functions that take a proportionally long time to execute or functions that are called many times.
Be a Power User
The Safari developer tools include dozens of keyboard and mouse shortcuts to speed up common operations, from opening Web Inspector to cycling through auto-completion suggestions. See the shortcuts table in “Keyboard and Mouse Shortcuts” to boost your productivity.
Enable, Build, and Debug Extensions
Use Extension Builder to create extensions. You need to join the Safari Developer Program to install the extensions you create—you can’t install an extension unless it has a signed certificate. Go to developer.apple.com to join the program.
When you’re ready to build an extension, read Safari Extensions Development Guide, and refer to Safari Extensions Reference. If you’ve already developed extensions for other browsers, see Safari Extensions Conversion Guide for time-saving tips.
Injected scripts and style sheets as if they were downloaded from the webpage’s host.
Extension bars by right-clicking or Control-clicking it and using the Inspect Element contextual menu to open Web Inspector.
Popovers can be debugged by right-clicking or Control-clicking it and using the Inspect Element contextual menu to open Web Inspector.
A global HTML page by clicking Inspect Global Page in Extension Builder (the button is present only if the selected extension is installed and has a global page).
Safari Extensions Development Guide delivers step-by-step directions for creating Safari extensions using Extension Builder
Safari HTML Reference gives the supported HTML tags for Safari
Safari CSS Reference gives the supported CSS tags for Safari
Safari Web Content Guide offers guidance for developing web content for the iPhone
WebKit DOM Programming Topics includes articles on using and modifying the Document Object Model
© 2012 Apple Inc. All Rights Reserved. (Last updated: 2012-07-23)