Saturday, November 24, 2007

Web geekery

Mike Power points to the very cool "Inspect Element" menu item in the Safari 3 debugger.
Well I accidentally control clicked one, which I do sometimes. This of course opened the contextual menu. I noticed at the bottom there was a new menu item called Inspect Element. I clicked on this with curiosity. Suddenly the Web page went semitransparent black, except where the link under the mouse was. Also a new window popped up showing the structure of the link and even the CSS code going with it. I had found my debugger. Using the inspector, you can see every document that the Web page is using at the time. The inspector can also show all the errors visually and give you the reason for it. Another great feature is the speed inspector. This allows you to see visually how fast every file was downloaded and rendered.

Pretty impressive. You'll need a bit of Terminal tweaking to make the debugger active.

The Terminal tweak is as follows.
  1. Quit Safari.

  2. Open a new Terminal window. The Terminal application can be found at the following path.
    Applications --> Utilities --> Terminal.app

  3. Paste in the following command.

    defaults write com.apple.Safari IncludeDebugMenu 1

  4. Quit Terminal, relaunch Safari and in the menu bar, after the Help item, you will see a new Debug menu item.

And the Ctrl-click process described above will now also work.

If you want to switch off the Debug menu, simply repeat the process above but replace the 1 with a 0, e.g.
defaults write com.apple.Safari IncludeDebugMenu 0

I don't know how this works on Windows, I'm afraid, but I imagine that there will be some way to do it.

UPDATE: now Iain Dale can have a go at this. Or, at least, he will be able to when his new MacBook arrives. Anything to do with me whipping mine out t'other day, Iain? Hem hem...