Safari Web Inspector Guide

About Safari Web Inspector

Note: This document was formerly titled Safari Developer Tools Guide. It has been updated to support Safari 6.1.

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.

Read this guide to get started using Web Inspector.

Note: As a web developer, you are encouraged to live on the bleeding edge. Download the latest WebKit Nightly, the developmental branch of Safari. It contains experimental, developer-facing features, so you can try out new WebKit functionality before it reaches wider audiences.

At a Glance

This document is organized by areas of the Web Inspector interface.

Get Started

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

How to Use This Document

When reading this document, follow along with Web Inspector open in Safari. It is recommended to actively use Web Inspector on this page while you read about its features for a hands-on learning experience.