In my last post I outlined some of the benefits of Safari in your day to day browsing. Today I'm going to highlight a lesser-known feature of Safari that might just be the first step in considering Safari for web development as well.
In my opinion, the single biggest barrier to using Safari in the web development profession is its lack of the Firebug extension. If you haven't heard of it already, Firebug is a tool for browsing and manipulating the CSS, HTML, and JavaScript of any web page, on the fly. This, as you could imagine is an invaluable tool for us developers. I can honestly say that Firebug cuts my development time in half (or maybe more).
So how about Firebug for Safari? It doesn't exist. Or does it?
Enter Safari's 'Web Inspector'. This tool, packaged with Safari attempts to fill the void for developers. Enabling the tool on your installation of Safari requires modifying the advanced preferences. An easy way to do this is by opening your terminal, and typing or pasting the following:
defaults write com.apple.Safari WebKitDeveloperExtras -bool true
Once enabled, the Web Inspector can be activated by right clicking anywhere on a web page and selecting 'Inspect Element', or by using the keyboard shortcut
⌥⌘I
Users of Firebug will feel right at home in the Web Inspectors UI. You will see the familiar columned layout displaying the DOM hierarchy on the left, and the CSS rules for the selected node on the right. With closer inspection one will find a wealth of important functionality such as a Metrics pane, which provides a visual representation of the margins, borders and padding affecting the currently selected node, as well as various HTML and JavaScript properties, including class names, offsetWidth/Height, and parent/sibling information.
There are many more in depth features of this excellent tool which I will save for a later post, but hopefully this has given an idea of what is possible. I encourage all developers to give Safari's Web Inspector a try, if only to give you a relative comparison of Firebug.