Safari's Web Inspector

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.

Shane Vincent

Shane Vincent

Shane Vincent is Drupal industry veteran and co-founder of Deck Fifty Design. With advanced knowledge of open source web development he works diligently to create highly functional & user friendly websites for his clients. Shane has a solid background in PHP, CSS, Javascript (jQuery), XHTML, as well as LAMP web server configuration. He currently specializes in front end web development using his favorite open source content management system, Drupal. Shane is comfortable heading large web development teams, but also enjoys late-night solo coding sessions.

Get in touch

Let's go!

We look forward to hearing from you!