Web Development with... Safari
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
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.
‘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.
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.
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.
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.