Searching for FireBugs on a Safari?

WebKit Development Tools

In the past few weeks, I was involved into heavy JavaScript web-development at work and had to work with tools that allow me to debug dynamic web-content in an effortless way. Most people would now say “Use Firefox with FireBug addition!” and I would even agree with them, if I would be using some Windows operating-system instead of my lovely Mac. Everyone who has ever used Firefox on a Linux or a Mac OS X will know, that it’s a pain in the arse. Due to the way Mozilla-developers have taken to make Firefox available on multiple platforms, it lacks of any speed and integration within most implementations.

So what to do on a Mac, where Firefox trying to render a full-blown AJAX-site needs more space and CPU-power than a VMware or Parallels instance of Windows XP, running the IE? Most people don’t really know, that the Mac’s integrated browser already provides a very good toolset for web-development which just got even better with the version 4 (yet, still Beta) of Safari.

The toolset is hidden, on a regular OS X, but it can be unlocked pretty easy. The only thing you gotta do, is quit your Safari, open a Terminal and enter this command:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true


It should quit without any output. After that, you can quit the Terminal and re-start Safari. You might not see any difference to Safari’s appearance before spawning the command, but now just try to do a right-click / command-click within a web-site. You will see, that your popup-menu has just been extended by one new item at its bottom, called “Inspect Element“. By clicking this entrie, Safari either opens a new window or separates your current one with an additional view, depending on what Safari version you’re using. This command works on 3 and 4.

Within that window, you will see a lot of useful information about the page. You can see time and size measurements, script-warnings and -errors and many many more. This extensions to Safari’s WebKit provides you nearly everything you might know from FireFox Add-Ons like FireBug. And besides of that, it allows you to profile your page in a sleek and easy, graphical way.

I’m now working quite some time with those tools, exactly because of all the problems I had with Firefox on my Mac, and I must say that I love them. I love the integration and the way it allows me to debug my sites. The only thing I liked more in FireBug was the precision of its GET/POST/PUT/…-output, but most of the time I don’t need that anyway.

Enjoy!