If you’re a Web coder, Safari 3 offers some really nice debugging features – if you know where to look for them. First, you need to turn on Safari’s Develop menu (hidden by default). To do this, choose Safari > Preferences, then in the Advanced tab check the Show Develop menu in menu bar option. You’ll see the new menu appear to the right of the Bookmarks menu in the menu bar.
The first option, Open Page With, lets you open the current page in any other installed browser – handy for cross-browser testing. The second, User Agent, tells Safari to masquerade as another browser when viewing websites. Safari still renders pages as Safari, but sends another user agent string to the Web server. This can be useful if you’re testing browser detection code, for example.
Call in the Inspector
Deeply cool, though, is the Network option below Console. This reveals a timeline that shows you how long each part of the current Web page took to load over the network. The bars are colour-coded by media type: green for style sheets, purple for images, and so on. This is a really great way to see how long your site is taking to load, and what the bottlenecks are. I’ve used a few such network profiling tools in the past, but none are as readily accessible (and as pretty) as this one.
The geeky joy continues
Moving further down the Develop menu, we have the Snippet Editor. Enter HTML and CSS directly into the top pane of the Snippet Editor window, and the rendered results appear in the bottom pane. This can be useful for testing small snippets of markup without having to edit a Web page, but in practice I find it’s more useful to just go ahead and test within the page proper.
The final six options let you disable various Safari features to aid with debugging. They work like this:
- Disable Caches: Temporarily turns off caching, forcing Safari to fetch Web pages, images and other resources from the net each time they’re needed. Great for making sure you’re looking at the most recent version on your server.
- Disable Images: Replaces all images in the page with the contents of their ‘alt’ attributes. Good for checking you’ve included ‘alt’ attributes for all your images (as every Web developer should!).
- Disable Styles: Turns off all CSS styles, displaying the markup without any CSS applied. Useful for making sure your page makes sense to non-CSS user agents, such as text browsers, screen readers and, perhaps most importantly, search engines.
- Disable Site-specific Hacks: Yucky, but true – Safari apparently contains hacks and workarounds for certain types of Web pages (Apple purists avert your eyes). You can disable such hacks with this option. (Exactly what these hacks are is a mystery.)
The Develop menu in Safari 3 is a powerful beast, and it’s a great way to debug Web pages. I find myself using it quite a bit these days (as well as Firebug in Firefox).
By the way, if you’re after more general info on developing Web pages with Safari, the Apple developer site has a decent Safari Developer FAQ.