Introduction

Safari 4 and later includes built-in tools you can use to ensure that your website works with Safari and other standards-compliant browsers. It also has tools to help you prototype, analyze, debug, and optimize websites and web applications. These include tools for prototyping HTML, CSS, and JavaScript, tools for interactively debugging attributes and styles, an integrated JavaScript debugger, and optimization tools such as a latency and download timeline and a JavaScript profiler.

This document describes how to enable the tools in all versions of Safari, including Safari on iPhone and iPod touch, as well as how to enable the tools in any WebKit-based application, then shows how to use the tools to prototype, debug, and optimize your website.

If you develop websites or web applications, you should read this document.

Organization of This Document

This document contains the following chapters:

• “Overview of Developer Tools for Safari”—how to enable the developer tools, differences in the toolsets available on the desktop and iPhone, and a brief command summary of the developer tools menu.

• “Prototyping Your Website”—how to use Safari to interactively prototype websites and test for syntax and structural errors.

• “Debugging Your Website”—how to find and fix problems in HTML, CSS, and JavaScript to make your website work as you intend, while being Safari compatible and standards compliant.

• “Optimizing Your Website”—how to use the visual timeline and JavaScript profiler to optimize your HTML and JavaScript so your webpage loads and runs efficiently and responsively.

---