Soup of the Day

The wonders of WebKit and Drosera

Apple rarely give wonderful free things away for developers. Consumers enjoy a whole host of wonderful free applications from the Cupertino company; well okay to be fair only iTunes and QuickTime these days. But it is even worse for developers who generally can only enjoy iTunes and QuickTime themselves. Actually I should point out that the Apple Xcode integrated development environment is almost free, if you purchase a copy of Mac OS X that is.

But behind every great product is an even greater Open Source project and Apple’s WebKit is one of them. To explain, WebKit is the Mac OS X variant of KHTML rendering engine common in the Linux KDE environment. Apple chose KHTML because of it’s rendering speed (far faster than Gecko in most cases), as well as it’s broad support of web pages due to additional Internet Explorer rendering quirks being supported. KHTML being an Open Source project itself requires Apple to release all of it’s code for Safari (Apple’s own branded browser) under the same LGPL licence as KHTML, thus WebKit was born.

WebKit is purely Safari, at least on the surface. When you download and copy the application to your Applications folder the only noticeable difference is the colour of the metal frame on the icon; yes it’s gold rather than silver. Launch it and it will tell you it is Safari and for all intents and purposes it is. But unlike Safari, WebKit is released nightly, so you’re getting a lot of what Safari will be when we get version three in the next version of Mac OS X.

However once you start browsing with it a few things begin to leap out. The first of which was the fact that form items that have CSS styles associated with them now adopt those styles, while still maintaining a polished ‘Apple’ look about them. It’s very nice, styled Aqua form elements. The other thing you will notice is that is has far few command options if you right click, but it has the addition of one very important one, ‘Inspect Element’.The Inspect Element menu option launches one of the most beautiful and useful DOM inspectors around, which is what you would expect from Apple, but it is still a very welcome surprise when you first use it. What makes this DOM inspector special is the clear and concise delivery of rather complex information, particularly the metrics tab. Finally debugging CSS and the DOM tree becomes almost a walk in the park.

The only issue with WebKit’s DOM inspector is you need to perform a quick line of code in the Mac OS X Terminal before the ‘Inspect Element’ item will appear.

defaults write com.apple.Safari \
WebKitScriptDebuggerEnabled -bool true

But the best just gets better. Alongside WebKit is another application which at first glance seems a little useless, but under the hood of the nondescript application is a wondrous Javascript Debugger called Drosera. Once you have launched WebKit successfully you then need to launch Drosera and attach it to WebKit using the main menu. At this point the next time a page is loaded into WebKit, Drosera will come to life and debug your JavaScript as the scripts are run, allowing you to do all the great things you’d expect from any debugger.

All of this makes WebKit a must have toolkit for the Mac OS X based web developer.

Some quick trivia for you before this post ends. Safari was the first ever browser to pass the Acid2 test set by the Web Standards team, which tests level of CSS integration a browser has achieved. Safari was quickly followed by Konqueror as the second browser. To date neither Mozilla Firefox (Gecko engine) nor Microsoft Internet Explorer (Mosaic Trident engine) have passed this test; although Firefox version 3.0 Alpha has passed the test.