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

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Instagram Hickstagram

  • 15 Oct 2018

    Inktober Day 15. @hicksmade’s staircase led me to this. There must be a hairdressers somewhere called this? #inktober #inktober2018 #leighandjondoinktober #hairwaytosteven

  • 14 Oct 2018

    Inktober day 14 - from @hicksmade’s theme of escape, and tonight’s Dr Who, with a return to classic theme: running!. #inktober #inktober2018 #leighandjondoinktober #drwho #pictogram #signage

  • 14 Oct 2018

    Inktober day 13 is more of a doodle as time was very short! There was a bird in @hicksmade’s day 13 so I ran with that. . #inktober #inktober2018 #leighandjondoinktober

  • 12 Oct 2018

    Inktober Day 12. Thinking about @hicksmade’s lumos led me to this “please don’t turn me off…”. #inktober #inktober2018 #leighandjondoinktober #sadlightswitch

  • 11 Oct 2018

    Inktober Day 11. The shape of @hicksmade’s spoons made me think of the Mandrake - a root that looks like a tiny human. There are lots of legends around it, but this one is based on the Harry Potter interpretation. . #inktober #inktober2018 #leighandjondoinktober #mandrake #harrypotter

  • 10 Oct 2018

    Inktober day 10. @hicksmade led with a lovely bee, which made me think of the Jesus and Mary Chain song “Just like honey”. Fancied trying something different so went for a 60s typographical thingy . #inktober #inktober2018 #leighandjondoinktober #honey

  • 10 Oct 2018

    Beautiful morning at North Leigh Common!

  • 09 Oct 2018

    Inktober day 9, as the crow flies. An obvious link from @hicksmade’s scarecrow, but I’m much happier with this one compared to yesterday’s. #inktober #inktober2018 #leighandjondoinktober #crow

  • 09 Oct 2018

    Inktober day 8 and boy am I cross with how this one turned out. It’s utter pants. Supposed to be Bill Murray and Scarlet Johannsen in Lost in Translation, not that you could tell from this. Bill looks like a zombie, and goodness knows what that is on the right. It put me in such a bad mood last night, but I need to let it go and move on. (I even cheated a bit and touched up some bits in Photoshop!). The one bit I’m happy with is his neck, and that’s it. Rant over #inktober #inktober2018 #leighandjondoinktober

  • 07 Oct 2018

    Inktober day 7. When @hicksmade drew an apple, I couldn’t get the apple bonkers from Yellow Submarine out of my head. Those faces gave me nightmares as a child. . #inktober #inktober2018 #leighandjondoinktober #yellowsubmarine #applebonkers

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