About Safari Web Inspector

Describes the developer tool built into Safari that helps you prototype, optimize, and debug web content.

At a Glance

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

Get Started

Learn how to enable and customize the appearance of Web Inspector.

Relevant Chapter: Get Oriented

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.

Relevant Chapter: Resources and the DOM

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.

Relevant Chapter: Timelines

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.

Relevant Chapter: Debugger

Interact with the Console

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

Relevant Chapter: 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.

About Safari Web Inspector

At a Glance

How to Use This Document

See Also