Apple has brought its expertise in OS X and iOS development tools to the web. Safari includes a powerful set of tools that make it easy to modify, debug, and optimize a website for peak performance and compatibility. And in Safari 6, the Web Inspector has a streamlined new design that speeds up common development tasks. To access these tools, enable the Develop menu in Safari’s Advanced preferences.
Develop Menu
All of Safari’s powerful developer tools are easily accessible from the Develop menu. The Develop menu contains a wealth of tools that you can use for web page manipulation and debugging.
Web Inspector
The Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. With the Web Inspector, you see Safari’s developer tools in a clean, unified interface designed to make developing web applications more efficient.
Resource Navigator: View the details of webpage resources such as documents, scripts, and images.
Storage Navigator: The Storage navigator allows you to inspect offline databases, execute SQL queries, and view HTML5 web storage and cookie information.
Instrument Navigator: You can now see the bigger picture when tracking down page performance issues. A single timeline shows you network loads, page layout and rendering, and JavaScript activity.
Search Navigator: Quickly and easily search all of your HTML, CSS, JavaScript, and other webpage resources for any string.
Debug Navigator: Use the Web Inspector's debugger to step through your code, easily navigate the call stack, and view values for local and global variables.
Breakpoints Navigator: See breakpoints across all your files. You can see them in this view, and also enable/disable them from this view.
Snippet Editor
The Snippet Editor makes it easy to test experimental pieces of HTML markup. Just enter the code into the editor and Safari renders the results immediately.
Extension Builder
Safari simplifies extension development with the Extension Builder. Instead of entering your scripts, stylesheets, and commands in a text file, you can select your extension resources visually in the Extension Builder, a template that’s as easy to fill out as a form. You can also use the Web Inspector to build, optimize and debug your extension, just as you would a website. Learn more
