There’s one new thing on Safari 3 (for the Mac) that I found quite by accident.

Right-click on anything in a browser page and at the end of the normal contextual menu you’ll see a “Inspect Element” item. Selecting that opens a semitransparent “Web Inspector” HUD which shows tons of information about the document’s DOM structure, including CSS styles, element metrics, properties, and so forth.

The whole light-text-on-transparent-black look of these HUDs seems to be a matter of taste – I like them well enough in iPhoto, but on a white background, not so much – and there are some bugs; the top outline view doesn’t respond to the scroll wheel, for instance. Still, this seems to be a very useful tool for debugging your web pages; it’s making me want to (finally) redesign my site, even!

Ah, and this seems to work only if you have Safari’s debugging menu enabled. To enable it, quit Safari, open the Terminal and type:

defaults write IncludeDebugMenu 1

and it should work when you run Safari again.

People tell me this was already enabled in recent nightly WebKit builds, but I haven’t checked those for some time…

Update: as detailed here, you should do:

defaults write WebKitDeveloperExtras -bool true

if you don’t want the debug menu, just the inspector… and this is from January 2006! So this was there all along? Works in Safari 2, even? Heh.

Update#2: I just checked this… it doesn’t work in Safari 2 as such; you need a more recent build of WebKit.