About Safari Developer Tools

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

Show Web Inspector’s console while prototyping your website to quickly spot HTML and JavaScript structural and syntactic errors. The console shows you errors and warnings, highlights the line number of the problem in your source file, and tells you how Safari dealt with the error (by ignoring an extra closing tag, for example). For details, see “Using the Error Console,” “Viewing Issues,” and “Using the Console to Prototype JavaScript.”

Safari also comes with a Snippet Editor, where you can type in HTML, CSS, and JavaScript snippets and see them evaluated interactively. No more having to create a dummy HTML page to test an element or a JavaScript function—just type in the part you’re working on and see the results. When it works as you want it to, copy and paste it into your actual webpage. For details, see “Using the Snippet Editor.”

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

The Error Console finds and identifies syntactic and structural errors, but sometimes your website doesn’t look or behave as you want, even though the syntax and structure are legal. That’s when you need Web Inspector. Web Inspector shows you the DOM as it exists in memory—for a static HTML page, that’s often identical to the page source, but for websites that modify the DOM using JavaScript and CSS, it can be very different.

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.

Use Web Inspector to Debug JavaScript Interactively

Web Inspector includes tools to help you set breakpoints, pause, inspect variable values, see the call stack, log messages and data to the console, set variable values and continue, and enter JavaScript on the fly to test it—all with autocompletion of function, property, and variable names to speed you along.

• See It All

  Web Inspector shows all the JavaScript sources—inline functions in the HTML, included .js files, 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 shows all the resources your site uses—HTML files, JavaScript files, CSS style sheets, server-side output, images, fonts, and media files—in a timeline view, showing when each resource was requested, the latency for each request, when the first byte of the resource arrived, and when the resource finished loading. At a glance, see if your website is hung by a slow server script, bandwidth-choking file sizes, network latency problems, or unexpected dependencies such as a resource that is not requested until after a script executes.

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.

If the timeline shows that significant time is spent in your scripts, use the Profiles section of the Instrument navigator to determine where. Moving a single function call from the inside of a loop to the outside of the loop can sometimes have a tremendous impact. Running a profile takes the guesswork out of optimizing JavaScript. A profile shows you how much time is spent in each function, including dependent functions, and how many times each function is called.

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.

The full set of developer tools for inspecting, modifying, and optimizing HTML, CSS, and JavaScript works on extensions. Once you’ve built and installed an extension, you can use Web Inspector to debug and optimize:

• 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).