Weblog. Comments.

// the henhouse in detail

The hidden Inspector of Safari 3

5 Comments // Posted on the 21st Nov 2007 in Mac, Interweb

Quite a few web-developers use Firebug, a Firefox plugin that allows you to view, inspect and debug your source code. A graphical load-time graph is also included to analyse performance.

With a few Terminal hacks, Safari 3 now supports this without a plugin. Even though the new Safari browser still crashes regularly, I really like this feature.

Load-time graph in Safari 3
Safari’s new Inspector showing a load-time graph of squawkdesign.com

Since Safari’s new inspector is not enabled by default you have to open Terminal (which you can find inside your Utilities folder) and run the following command:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Re-launch Safari and you will find a new list item when you control-click on any element on your page: Inspect.

Right-click menu
Control-click (right-click) on any element and you will see a new menu item: ‘Inspect’

Initially, the Inspector is shown in a new window. However, if you click on a small button displaying a set of rectangles in the bottom-left of the Inspector window, then it is shrunk into the window that it is inspecting.

Additionally, if you click on a small button displaying a downward facing triangle in the bottom-left of the Inspector window, then you will get some additional items in the sidebar. One of them shows a load-time graph, shown in the first image of this article.

Of course you can also simply look at your html code, stylesheets or any file that is being loaded. Just select it in the sidebar on the left.

Have a play around with Safari’s new Inspector and tell me what you think. I have been using it for a couple of days and up to now I cannot complain.

5 Comments

5 Comments

Comments are no longer available for this entry.

  1. // Tim Martin

    Gravatar of Tim Martin

    Monday, December 3rd 2007
    at 21:13 PM

     

    I was cruising around looking for css resources and came across this site, it’s a very inspiring site full of good design examples.

    Thanks!

  2. // sDf

    Gravatar of sDf

    Tuesday, December 4th 2007
    at 8:56 AM

     

    Fantastic design. Thumbs up!

  3. // Phil

    Gravatar of Phil

    Monday, December 10th 2007
    at 1:12 AM

     

    Really cool. While not _quite_ as useful as Firebug (the whole js console thing), it definitely has its value. Plus it gives me another reason to use Safari :D

  4. // izlekop

    Gravatar of izlekop

    Monday, February 18th 2008
    at 18:49 PM

     

    Thanks for the suggestion. ;)

  5. // Asanka Dewage

    Gravatar of Asanka Dewage

    Monday, March 10th 2008
    at 8:08 AM

     

    Thanks for the tip! Although, not as accessible and cool as FireBug, a very nifty tool in deed.

Comments are no longer available for this entry.