Web Development with... Safari

31 May 2006

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

Web Inspector context menu command

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.

Web Inspector window

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


(More Information)

SafariStand's action menu

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.

SafariStand 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.


(More Information)

Safaritidy status bar messageA 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.

SafariTidy source view

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


(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.

SafariSource preferences

It requires SIMBL to be installed first.


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.

Recent Posts

Identity Design discussion on Elastic Brand podcast

23 Jan 2019

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Instagram Hickstagram

  • 15 Feb 2019

    I didn’t manage to do a single episode of the Troika Podcast in 2018, but I’ve managed to record one now. Doing the whole process on my iPad Pro is wonderful! Episode 33 coming soon…

  • 14 Feb 2019

    That time of year when I keep marvelling at “Still light at 5!” On my way home…

  • 03 Feb 2019

    Black-headed Gulls huddled together on the ice at Rushy Common. #birding #digiscoping

  • 02 Feb 2019

    Found a bundle of things from my birth while at my Dads today. Leaflets on maternity benefits, welfare services and my weight card (Johnathan? Have I been spelling my one name wrong all these years?!)

  • 01 Feb 2019

  • 01 Feb 2019

  • 27 Jan 2019

    For her birthday last year, some of Leigh’s chums clubbed together bought her a gin blending weekend at the Plough in Clanfield. We booked it for January (when it would be needed most). It was like a potions class, and after a lot of smelling, she now has a gin that tastes like pencil shavings! It’s even nicer than it sounds!

  • 23 Jan 2019

    Pondering about pictograms - we’re going to need a new symbol soon. #icons #pictograms #symbols #representations

  • 13 Jan 2019

  • 05 Jan 2019

    Just tried the Vegan Sausage Roll from Greggs. Really good - nicer than the meat one, and the thought of Piers Morgan frothing at the mouth makes it even tastier

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom