Despite its overhaul with the release of Safari 4 back in July, there hasn’t been very much attention surrounding the Safari develop menu. I thought a brief introduction to this powerful feature would give some other developers another reason to switch to Safari (and I mean brief introduction… there is no way I have the time to cover every option provided by this extensive tool!)

To enable the menu check ‘Show Develop menu in menu bar’ in the advanced panel of Safari’s preferences.

From the menu you have immediate access to some simple but very useful features such as adjusting the browser’s user agent or disabling various features enabling easier testing. But probably the most powerful option available from this menu is the Web Inspector.

Web Inspector

The Web Inspector is probably the feature that Firebug users will feel most familiar with. Simply translated Firebug’s ‘HTML’ and ‘CSS’ panels are called ‘Elements’ in Web Inspector; ‘Script’ remains the same; the DOM section is now built into the properties area of Web Inspector’s ‘Elements’; and ‘Net’ is now known as ‘Resources’. Finally, the console always sits at the bottom of the inspector displaying the number of errors and warnings in the bottom right.

Console

The console button makes it very easy to quickly pop open and close the console giving easy access to error and warning details as well as the command line itself. Probably one of my favourite new features is the auto-complete feature when using the command line. As you type the console throws suggestions at you, which you can cycle through with the TAB key before accepting with the right arrow key.

Auto-complete suggestions in web inspector’s console command line

This is a pretty neat time saving trick, however much command line experience you have. On another note for potential Firebug coverts, the command line is compatible with Firebug’s own.

Elements Panel

The Elements panel is probably where I spend most of my time during projects. Much like Firebug’s HTML and CSS panels, Web Inspector makes it ridiculously easy to try out changes to both areas of your code. However, I think most developers would agree that after using Web Inspector for just a bit you’ll find it far more intuitive and refined than Firebug’s editor.

Safari Web Inspector - Elements

The ‘Styles’ sidebar make it very easy to manage even the most complicated of stylesheets and I often use it to help me cut out unnecessary chunks of code. Also the ‘Metrics’ section offers you a handy border box model for your elements which can be edited directly and ‘Properties’ gives you a convenient way to browse and edit DOM attributes/properties.

I also find myself constantly inspecting clicked elements through the use of that little magnifying glass button in the bottom left of the Web Inspector.

Resources Panel

Every good designer knows that however beautiful a design is, it will only go to waste if visitors don’t hang around long enough to actually see it render. The most efficient way to improve website loading time is through reducing http requests and file sizes – both of these are measured through Web Inspector’s ‘Resources Panel’.

Safari's Web Inspector Resources Panel

Apart from displaying results in a beautifully efficient manner, the panel also offers you the option to sort results through a variety of parameters including: response time, start time, end time, duration and latency.

Scripts Panel

I suppose the first thing that should be said about this panel is just how fast it is. It truly is dramatically faster than the tool included with previous versions of Web Inspector. I also find that leaving it enabled all the time doesn’t appear to have much effect at all on my browsing speed (although I’m sure some it does have some effect).

Web Inspector's Scripts Panel

From this panel you can see all the script resources that are included in the current page. You have standard controls for pausing and resuming scripts and whilst paused you can see the current call-stack and in-scope variables in the sidebar.

Profiles Panel

Put simply, the ‘Profiles’ panel allows you to see a break down of where execution time is spent within your page’s javascript.

Web Inspector's Profiles Panel

The user interface is essentially a sortable chart of results helping you to identify which functions have the largest performance impact on your scripts. I haven’t had much chance to look beyond the basics of this panel yet but I’ve found it easy so far to create profiles with the useful record button in the bottom left of the panel. Firebug users will also be happy to find out that the profiler is compatible with Firebug’s console.profile() and console.profileEnd(). Finally it’s also very easy to filter results with the focus (the eye) and the exclude (the x) button at the bottom of the panel.

Databases Panel

I’ve had very little interaction so far with the Databases panel. Essentially this tool gives developers a way to manage session storage and local storage – a feature obviously included for those working with the development of HTML5 applications. Unfortunately I have personally been missing a cookies section on this panel, which seems like a strange feature to leave out, but is hopefully just a temporary oversight.

Conclusion

So I suppose it would be a bit of a cop out to not give an answer now on whether Web Inspector is ready to ease the transition for developers from Firefox to Safari… but the answer truly is dependant on your requirements. I personally find the small niggles (such as lack of syntax highlighting in css) with Web Inspector worth working through because I’m much happier designing for webkit over any other engine. Developers who deal more heavily with scripts, databases and the such might understandably prefer to stick with Firebug for now but I’m confident that in time Web Inspector will make the improvements to cater for everyone.