Developer Tools for Safari Overview
There are developer tools built into Safari on OS X, iOS, Windows, and in other WebKit-based apps. These tools can help you prototype, debug, and optimize your website. This chapter gives a quick overview of how to enable and use these developer tools.
Developing Websites with the Developer Tools
The development process for websites can be accelerated by the Safari toolset at several points. The usual process is as follows:
Write—Author the website, using your favorite text editor.
Test and debug—Test using several browsers and platforms (Mac, Windows, iOS), track errors and correct them.
Safari on the Desktop, Safari on iOS, and WebKit
The toolset for Safari on the desktop (OS X or Windows) includes a Develop menu with several commands and a number of interactive tools. Safari on iOS (iPhone, iPad, and iPod touch) can enable a setting to allow Web Inspector to debug web content over a USB connection.
The toolset for WebKit-based apps is essentially the same as for Safari on the desktop, but it is available via the contextual menu, and you enable the tools differently.
Enabling Developer Tools in Safari on the Desktop
You enable the developer tools in Safari on the desktop (OS X or Windows) by turning on the Develop menu. In Safari preferences, click Advanced, then select "Show Develop menu in menu bar," as shown in Figure 1-1.
Selecting this option adds a Develop menu to your menu bar (Figure 1-2). The Safari developer tools are now enabled.
The Develop Menu Command Summary
The Develop menu contains a set of tools to assist you in prototyping, debugging, and optimizing your website:
Open Page With—Open the current webpage in another application.
Show Web Inspector—Open the Web Inspector window to inspect or modify the DOM, HTML attributes, and CSS properties.
Show Page Source—Open the Source Code in Web Inspector to see the HTML of the current page.
Show Page Resources—Open the Resource navigator in Web Inspector to view all images, scripts, and style sheets attached to the current page.
Show Extension Builder—Open Extension Builder to install, modify, create, or uninstall a Safari extension. For more information, see Safari Extensions Development Guide.
Empty Caches—Delete all caches stored by the browser.
Disable Caches—Turn off caching to see how a website loads the first time.
Disable Images—Turn off image display and view websites as text only.
Disable Site-specific Hacks—Use this to disable the modifications to Safari and test your site for correct operation (if Apple engineers have modified Safari specifically to work around a problem with your website).
Disable Local File Restrictions—Disable security checks that may prohibit local development.
Enable WebGL—Turn on the ability to view OpenGL content in Safari.
Enabling Developer Tools in WebKit-Based Applications Other Than Safari
To enable the developer tools in a WebKit-based application other than Safari, set the
WebKitDeveloperExtras key to the Boolean value
True in the
From the command console, type:
defaults write com.myApp WebKitDeveloperExtras bool true
myApp with the bundle identifier of your application.
You must also enable contextual menus in your application. Once this is done, launch the application. The Develop menu can now be accessed by a Control-click or right-click from within a web view in the application.
Enabling and Using Web Inspector in Safari on iOS Devices
You can enable an advanced setting in Safari on iOS to debug web content on your device directly from your desktop. To do this, turn on Web Inspector in the Advanced pane under Safari in the Settings app. Once it is enabled, connect your device to your desktop machine with a USB cable. Alternately, you can use Simulator to take advantage of Web Inspector’s debugging capabilities, which comes free with Xcode from the Mac App Store. If you are a registered iOS developer, you can even inspect the web content of a
UIWebView. For more information, read the chapter “Debugging” in Safari Web Content Guide.
© 2012 Apple Inc. All Rights Reserved. (Last updated: 2012-07-23)