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:
Prototype—Determine what combination of HTML, JavaScript, CSS, and local storage deliver the functionality you need, testing snippets of code interactively.
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.
Optimize—Make your website more responsive, shorten load times, and improve JavaScript execution.
Once you’ve enabled and familiarized yourself with the developer tools, use the Snippet Editor to streamline prototyping, Web Inspector’s Error Console for testing and debugging, and Web Inspector’s timeline view and JavaScript profiler to help you optimize your website.
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.
User Agent—Browsers send a user agent string that identifies the browser type and version to the server. The same string is sent in response to a JavaScript request for the user agent string. Use this menu item to modify the user agent string Safari sends, to simulate visiting your site using a different browser or device type.
Show Web Inspector—Open the Web Inspector window to inspect or modify the DOM, HTML attributes, and CSS properties.
Show Error Console—Open the console in Web Inspector to see any HTML or JavaScript errors and any corrective actions taken by Safari.
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 Snippet Editor—Open the Snippet Editor window to interactively prototype HTML, CSS, or JavaScript snippets.
Show Extension Builder—Open Extension Builder to install, modify, create, or uninstall a Safari extension. For more information, see Safari Extensions Development Guide.
Start Profiling JavaScript—Turn on the JavaScript profiler to see how many times each function is called, how long it takes, and so on.
Start Timeline Recording—Record detailed information about the status of incoming HTTP requests, JavaScript events, and layout rendering.
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 Styles—Turn off CSS style properties to view the page purely as HTML and JavaScript.
Disable JavaScript—View websites with the JavaScript interpreter disabled.
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 .plist file.
From the command console, type:
defaults write com.myApp WebKitDeveloperExtras bool true
replacing 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)