Recently I have been doing a ton of web development work with the Dojo Tookit. Safari on default settings is flat out useless for any javascript debugging or sane DOM element navigation. I have really become spoiled by the excellent Firebug extension. However, Firefox isn't my cup of tea on MacOSX, it is too un-mac-like, with it's custom XUL interface. Well, I have some good news for you fellow mac web developers, Webkit actually does have the ability to do all the things I just moaned about. It just takes a bit of configuration.

note: when I mention Webkit I mean Safari or vice versa

With a bit of research I dug up some interesting information on how to make Safari relevant for my web development needs. So here are some instructions on how to make Safari a first class browser for web development.

First thing, go ahead and download the WebKit nightly binary from the webkit site.

Once downloaded, you will most likely want to enable Webkit's hidden debug menu.
Type the following in Terminal.app

	
defaults write com.apple.Safari IncludeDebugMenu 1
	

With this enabled, Safari will have an excellent debug menu which you can use to benchmark your site, debug javascript errors and do other miscellaneous web developer things.

Debug Menu

You need to install WebKit Nightly for these features!

Well this is all nice, however, it still does not solve the issue with DOM element navigation. If you did install the newest nightly webkit, you can go ahead and enable the sleek DOM Element inspector!

	
defaults write com.apple.Safari WebKitDeveloperExtras -bool true
	

Once enabled you can right click on any element on the viewed page and select "Inspect Element" in your right click menu. This will open the very useful DOM Inspector. This handy utility will save you countless hours on figuring out why elements are positioned the way they are. The DOM Inspector generates a red border around the selected element defining how much space the element is taking up. It is extremely useful when it comes to CSS design.

Next, WebKit has a nifty Javascript debugger which enables you to efficiently debug Javascript issues. It enables you to start, stop, and jump execution of javascript code. I personally have not used it, so I do not have much to say about it. Outside of my recent Dojo Toolkit experimentation, I have not done any serious javascript work.

	
defaults write com.apple.Safari WebKitScriptDebuggerEnabled -bool true
	

Javascript debugger

Anyway, I hope this helps any fellow mac web developer out there get up to speed with developing on Webkit. Webkit is just much more pleasant to use than any other browser on MacOSX.