Safari Web Inspector

Web Inspector is an open source web development tool built into Safari that makes it easy to prototype, optimize, and debug your web content on iOS and OS X.

../Art/splash_2x.png

Get Oriented

Before you start using Web Inspector, familiarize yourself with its organization and interface.

Enabling Web Inspector

To start using Web Inspector, you must first enable the Develop menu. To do so, enable the “Show Develop menu in menu bar” setting found in Safari’s preferences under the Advanced pane, as shown in Figure 1-1.


Figure 1-1  The Advanced pane of Safari’s preferences

You can then access Web Inspector through the Develop menu that appears in the menubar, or by pressing Command-Option-I. You can also add the Web Inspector toolbar item to Safari’s toolbar by selecting View > Customize Toolbar.


Figure 1-2  The Web Inspector toolbar item

WebKit-based Apps

To enable the developer tools in a WebKit-based application other than Safari, enter the following into the Terminal:

defaults write com.bundle.identifier WebKitDeveloperExtras -bool true

Replace com.bundle.identifier with the bundle identifier of your app, and then launch your app. Web Inspector can now be accessed by a Control-click or right-click from within any web view. You must also enable contextual menus in your app.

Safari on iOS

You can use Web Inspector to debug web content on your device directly from your desktop.

bullet

To enable Web Inspector on iOS
  1. Open the Settings app.

  2. Tap Safari.

  3. Scroll down and select Advanced.

    A screenshot of options in Safari settings. The Advanced button is highlighted in blue.
  4. Switch Web Inspector to ON.

    A screenshot of the Advanced section of Safari settings. The option for Web Inspector is switched to On.

After Web Inspector is enabled, connect your device to your desktop machine with a USB cable. The name of your device appears in the Develop menu of Safari alongside all open inspectable apps and webpages.

Alternately, you can use iOS Simulator to take advantage of Web Inspector’s debugging capabilities, which comes free with Xcode from the Mac App Store. Use the same instructions,“To enable Web Inspector on iOS,” from within the iOS Simulator’s Settings app.

If you have a development provisioning profile installed on your device, you can even inspect the web content of any UIWebViewobject in your app. The name of your app will appear as a submenu under the name of your device. When debugging web content in a web view, Web Inspector behaves in the same manner as debugging web content in Safari.

Navigating Web Inspector

The toolbar icons listed in Table 1-1 are in order as they appear in Web Inspector, from left to right.

Table 1-1  Toolbar icons
Icon Name Described in
../Art/resources_2x.png Resources navigation sidebar “Resources and the DOM”
../Art/timelines_2x.png Timelines navigation sidebar “Timelines”
../Art/debugger_2x.png Debugger navigation sidebar “Debugger”
../Art/console_2x.png Console “The Console”
../Art/inspect_2x.png Inspect “Inspecting the DOM”
../Art/scopechain_2x.png Scope Chain details sidebar “Scope Chain”
../Art/style_2x.png Style details sidebar “Style”
../Art/layers_2x.png Layers details sidebar “Layers”
../Art/node_2x.png Node details sidebar “Node”
../Art/resource_2x.png Resource details sidebar “Resource”

Positioning Web Inspector

There are three positions that Web Inspector can take: docked to the bottom of the window, docked to the right of the window, or in its own window. When inspecting web content on OS X, Web Inspector is docked to the bottom of the window by default. You can detach Web Inspector into its own window by pressing the detach button (../Art/popout_2x.png). This mode is especially advantageous when working on a computer with multiple displays.

When in its own window, Web Inspector presents another button allowing you to dock Web Inspector to the right of the window. This is particularly useful for inspecting narrow web content on wide monitors. Press the Dock to Right button (../Art/dock_right_2x.png) to dock Web Inspector to the right side of the window.

Hold down the Option key to switch docking types.

Changing Toolbar Appearance

You can change the look and feel of the toolbar to better suit your liking. Depending on the size of your screen, you might want to adjust your toolbar to take up less space. Right-clicking anywhere on the toolbar invokes a contextual menu which allows you to change the layout and size of the toolbar icons.

Possible toolbar appearances are shown in Table 1-2. By default, toolbar icons are presented with icons and text positioned vertically.

Table 1-2  Toolbar variants
Para Appearance
Icon and Text (Vertical) ../Art/appearance_vertical_2x.png
Icon and Text (Horizontal) ../Art/appearance_horizontal_2x.png
Icon only ../Art/appearance_icon_2x.png
Text only ../Art/appearance_text_2x.png

You also have the option to make the icons smaller by selecting Small Icons from the contextual menu.

Reading the Activity Viewer

The activity viewer is like a heads-up display for the loaded page. It shows an at-a-glance summary of key information about the current page, as shown in Figure 1-3. Each label in the activity viewer is a button that, when clicked, takes you to an area of Web Inspector.


Figure 1-3  The activity viewer

Table 1-3  Buttons in the activity viewer
Item Description Button action
../Art/resource_count_2x.png Resource count The total number of resources. Opens the Resources navigation sidebar. See “Resources and the DOM.”
../Art/file_size_2x.png Resource size The total file size of all resources. Opens the Networks Requests timeline. See “Network Requests.”
../Art/load_time_2x.png Load time The time elapsed until the load event. Opens the Networks Requests timeline. See “Network Requests.”
../Art/logs_2x.png Logs The number of logs printed to the console. Opens the console. See “The Console.”
../Art/errors_2x.png Errors The number of errors printed to the console. Opens the console. See “The Console.”
../Art/warnings_2x.png Warnings The number of warnings printed to the console. Opens the console. See “The Console.”

Inspect the DOM and Resources

At the heart of Web Inspector is the ability to inspect the Document Object Model (DOM). Web Inspector shows you the structure of your DOM as perceived by Safari’s rendering engine, WebKit. But the DOM isn’t all you can inspect. External resources and locally stored data—such as scripts, stylesheets, and offline storage—can be inspected, providing insight to the data available to your web content.

Measure and Improve Page Performance

Web Inspector provides a suite of tools you can use to quantify the speed of your webpages. You can monitor network requests as they download, observe page layout calculations performed by the WebKit rendering engine, and profile the efficiency of your JavaScript functions and CSS selectors.

Debug JavaScript

Turn to Web Inspector when your front-end logic goes awry. Web Inspector offers a debugging environment that lets you pause script execution and observe the values of your variables as they are defined.

Interact with the Console

Lift up the hood of your webpages and interact directly with your web content in the console.