The Hickensian

When it comes to testing and debugging sites, it seems that Firefox can’t be beaten. Not only does it have an inbuilt DOM Inspector and Javascript console to beat all others, but the plethora of useful extensions is unmatched. Everyone knows and uses Chris Pedericks Web Developer extension, along with any number other handy extras – Firebug, X-Ray, Aardvark, etc.

Other browsers have useful tools though, which gave me an idea for an ad-hoc series highlighting useful web development features, starting with Safari. While it doesn’t have an official plugin architecture like Firefox, that hasn’t stopped developers finding ways around it and providing excellent plugins.

The Web Inspector

(More Information)

The first one isn’t a plugin at all, the Web Inspector is a ‘future feature’ of Safari, available in the WebKit nightly builds. Until this becomes the mainstream release, you have to download a webkit nightly from here.

Once you’ve coped WebKit.app over to your applications folder, open terminal.app and type:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Then when you launch WebKit.app instead of Safari the context menu has the command ‘inspect element’ at the bottom. Selecting this will show the inspector. Like the Mozilla DOM Inspector, it will show you source and style information for any element, but in an Aperture style ‘HUD’ window.

If you want to keep your copy of WebKit up to date, you can use NightShift to automate the process for you.

SafariStand

(More Information)

SafariStand adds an ‘action menu’ button to your toolbar options. Its not there by default – you have to customise the toolbar to add it. Once added, you can use the useful ‘Sub Resources’ menu, which lists all the linked assets from the page – css, javascript, gifs, swfs, etc. Select one, and it opens in a new window.

‘Show Page Info’ option which displays this date again, but more like Firefox’s page info window.

‘Show Related cookies’ shows you all cookies from the current site, with options to delete them.

You can also use SafariStand to colour your view source, but I recommend SafariSource for that (see below). Do tick the option of Source > Editable though, as this will allow you to make changes to the HTML and redisplay it, a great feature for debugging.

SafariTidy

(More Information)

A newcomer is this tasty little free plugin. At the time of writing its only on version 0.2, but already adds many useful web development features.

It sits in the status bar, telling you of validation warnings and errors, and when clicked, displays the source view along with a clickable list of message in a split view beneath. It also adds line numbers to the source (joy!!). The plugin has been designed to work with SafariSource, and I have run both with no problems.

The screenshot above shows SafariStands editable source tools (top toolbar), SafariSource’s syntax colouring and SafariTidy’s line numbers and warnings list.

SafariSource

(More Information)

This wee plugin gives you more options for colouring the source view. While SafariStand does have syntax colouring options, SafariSource allows you to be far more prescriptive about it.

It requires SIMBL to be installed first.

Also…

One plugin I haven’t included is WebDevAdditions, which adds many useful commands to the View menu. I haven’t heard of any updates to this in a while, and I used to get problems using it in conjunction with other plugins, so I haven’t gone into any depth with it here. By all means, try it out and see if it works for you.

There are many more plugins for Safari of course, these are just the ones that aid web development. As always, you can find out about more plugins for Safari at PimpMySafari, where there is also a good list of webdev bookmarklets that have been tested for Safari.