Debugging pages in Safari

I’m getting quite interested in Safari because it seems to be where a lot of the early implementations of interesting new standards is happening. It makes me happy to get a little glimpse at what the future of web development might look like. :)

The problem is Firefox has really spoilt me with all it’s great developer tools so I wrinkle my nose up at the idea of using console writes or alert boxes to see what’s happening in a webpage. What I really want is to test out some of these great new things that they’re trying out in Webkit and be able to take a look at the live DOM and all the javascript objects. So today (between seeing the final episode of this year’s Doctor Who and helping Joe relieve his childhood watching D.A.R.Y.L on Channel 5) I did a little Googling to see what tools Safari web developers use.

The develop menu

Safari actually has a lot of good developer tools built in, they’re just hiding in a Debug menu which isn’t displayed to the regular users.

It has a lot of the things a modern web developer might expect like a DOM inspector, user-agent switcher, a javascript/error console and a nifty tool that shows how long your page takes to download:

Tools like error console, network timeline and the web inspector

Enabling the debug menu

You make the menu show by enabling it in the preferences dialog:

1. Open the preferences dialog from the edit menu.
2. Go to the advanced tab.
3. Tick the show Develop in menu bar checkbox.

the advanced preferences tab

The DOM inspector

The most useful tool is the DOM inspector. It’s just like what you get in all the browsers, you can use it to click though all the elements on the page and find out all about their properties:

the DOM inspector shows all the css applied to the elements and shows the element's dimensions

Javascript debugging

The good news is that there’s a javascript debugging tool for Safari 3.0 and 3.1 called Drosera (named after the world’s largest bug eating plant – cute). The bad news is that right now it’s not easy to get it running on windows.

Safari 3.2 and above

In the future the debugger is going to be built into Web Inspector so it’ll be just a matter of loading it from the Debug menu. It’s scheduled for release in Safari 3.2 (for which I can’t find any sort of release date information).

If you want to take a look at what’s going to come, you can get a preview of it by getting a copy of the Safari 4 preview or a WebKit nightly.

It has most of the basic things you need in a debugger (no custom watch window though). Looks very slick:

The Safari 4 debugger has break points, variable window, call stack and buttons to step through the code