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 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.
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 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:
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).
It has most of the basic things you need in a debugger (no custom watch window though). Looks very slick: