Mar 15 2008

“FireBug Like” Tools in Safari

Published by john at 9:53 pm under Defaults, Safari

  
  

Most all web developers, most certainly those who work with Firefox, are familiar with Firebug. This tools nevers ceases to amaze me, the ability to change information (for example style attributes) on a webpage as your are viewing the page, is amazingly useful. Version 3.x of Safari now includes the option to enable a Firebug like debugging tool called Web Inspector…

You won’t find access to Web Inspector in your default installation of Safari. However, making the necessary configuration changes is as easy as running the following command from a Terminal:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

If you prefer, you can use the Property List Editor to set the WebKitDeveloperExtras property in the Safari property file, which is located here: ~/Library/Preferences/com.apple.Safai.plist (use Finder to locate the file and double click to open). You’ll need to restart Safari after making the changes to enable Web Inspector.

To open the Web Inspector, right click and choose Inspect Element as shown in the figure below:

With Web Inspector running, you have access to a goodly amount of information. Take a look at the screenshot below which shows content from the Google homepage.

While poking around on Web Inspector, I clicked on icon in the lower left corner (the little arrow-in-a-box) and a popup menu appeared showing options for Network and Console. I selected Network and information about document and image transfers appeared (see the figure below). The Console option in this same menu resulted in a blank page appearing, so it seems I still have some exploring to do to figure what this option is all about. If you click on the icon just to the right of the arrow-in-a-box, the Web Inspector will be shown in a split window view versus a popup window.

I haven’t found an option for editing “on-the-fly” as in Firebug, however, Web Inspector is a good start for a built in tool and I have no doubt it will continue to evolve….

Technorati Tags: , ,

7 Responses to ““FireBug Like” Tools in Safari”

  1. # mson 17 Mar 2008 at 12:43 am

    Since safari is available as beta on windows, how do you enable it there I wonder?

  2. # ncloudon 17 Mar 2008 at 7:06 am

    You might also want to try firebug lite:

    http://www.getfirebug.com/lite.html

    It simulates some core firebug functionality in non-Firefox browsers.

  3. # johnon 17 Mar 2008 at 7:34 am

    To enable Web Inspector for Safari on Windows, you first need to find the file ‘WebKitPreferences’ Here is where I found the file on my system:

    C:\Documents and Settings\Administrator\Application Data\Apple Computer\Safari\WebKitPreferences (notice there is no file extension).

    Add the following key before the </dict> entry:

    <key>WebKitDeveloperExtras</key>
    <true/>

    Restart Safari and right click on a webpage and you should be off and running.

    John

  4. # Miroon 17 Mar 2008 at 6:13 pm

    Very useful. Thanks.

  5. # jonahon 18 Mar 2008 at 4:39 pm

    this is great! thanks a lot

  6. # dannyrockson 28 May 2008 at 12:12 pm

    thanks guys!!

  7. # Lee Floydon 11 Jun 2008 at 7:45 am

    Thank you, John, for the Windows tip. It definitely helps in our PC-based office!

Trackback URI | Comments RSS

Leave a Reply