Safari for Developers

Leading performance. Great developer tools.
And a powerful new way to keep users engaged with your website.

What’s new in Safari.

Safari offers leading performance, compatibility, and a great set of built-in web development tools. And with Safari Push Notifications in OS X Mavericks, you can keep your users up to date with news, sports scores, and other alerts - even when Safari isn’t running.

Safari Push Notifications

Keep users up-to-date with news and other alerts using Apple push notifications. Once users have signed up for notifications from your website in Safari, you can send push notifications that appear just like Mac app notifications even when Safari isn’t running. Users can click the notification to launch your website in Safari.

Learn more

New Web Inspector

Web Inspector has a new look with a streamlined toolbar and a great set of built-in web development tools for building and debugging your website.

Activity Viewer

The new Activity Viewer in the center of the toolbar gives you information about your webpage resources, loading time, logs, errors, and warnings at a glance.

Dock to Right

You can now dock the Web Inspector in the right of Safari window, making it easy to view mobile-sized webpages.

Styles Sidebar

The new Styles sidebar simplifies CSS editing. The sidebar highlights syntax, autocompletes, and makes it easy to toggle properties on and off.

Layers Sidebar

The new Layers sidebar makes it simple to see how composited DOM elements impact your webpage’s memory usage and performance. Clicking a layer reveals a popover with more details.

Pretty Code

Web Inspector automatically pretty prints minified JavaScript and CSS, with support for debugging while pretty printed.

Source Maps

Support for source maps lets you read and debug your code even after it has been combined and minified.

Console Log

Web Inspector has improved copy and selection behavior, live search, and live filtering.

DOM Tree

You can now undo or redo changes to the DOM and view shadow DOM elements alongside regular elements.

Pseudo-States

Toggle pseudo-states for your elements to easily test and tweak your hover, active, and focus style rules.

Timeline Filtering

You can filter timeline events to more quickly analyze timeline data. Web Inspector now shows exactly which lines of code triggered layout and style recalculation.

Debugging Improvements

Conditional breakpoints give you more control over when to pause in the debugger. When paused, you can now hover variables to see their values in an interactive popover.

Learn more about the developer tools in Safari