“FireBug Like” Tools in Safari

Sat, Mar 15

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….

29 comments

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

by ms on Mar 17, 2008. Reply #

You might also want to try firebug lite:

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

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

by ncloud on Mar 17, 2008. Reply #

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

by john on Mar 17, 2008. Reply #

Very useful. Thanks.

by Miro on Mar 17, 2008. Reply #

this is great! thanks a lot

by jonah on Mar 18, 2008. Reply #

thanks guys!!

by dannyrocks on May 28, 2008. Reply #

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

by Lee Floyd on Jun 11, 2008. Reply #

Good

by Asish Mohapatra on Aug 29, 2008. Reply #

nice one. This has already saved me an hour and I only read your article this morning.

by Stuart Steel on Sep 25, 2008. Reply #

great tip.
To edit an existing property, double click on it. Works for html and css. For css edit the style itself instead of the “computed style”.

by jerome on Sep 27, 2008. Reply #

I just find out that with safari 3.1.2, we need to go menu Edit/Preferences/ then select tab Advances to enable Developer menu and voila`.

by Tuan Ngo on Nov 13, 2008. Reply #

Nice,!

by Aze on Nov 21, 2008. Reply #

awesome. i just wish there was something like this for IE. it would make my life a million times easier!

by cool on Nov 26, 2008. Reply #

Cool, hopefully I can get my apple friends to start putting in some design work!

by Skyl on Feb 2, 2009. Reply #

Hi Jerome,
You said:
“To edit an existing property, double click on it. Works for html and css. For css edit the style itself instead of the “computed style”.

When I click on anything, nothing happens either in the main window or in the windows below the comuted style. What am I missing please?

by Julian on Feb 13, 2009. Reply #

Fantastic little tip. And that prefs editor is pretty dang handy as well :) Thanks much.

by Will on Feb 22, 2009. Reply #

Julian, make sure you switch to DOM mode instead of the page source mode. As you would expect, the page source mode doesn’t allow for changes. In DOM mode it is very similar to Firebug.

by mick on Apr 3, 2009. Reply #

Great Tips!

However, do any of you know how to access the

C:\Documents and Settings\Administrator\Application Data\Apple Computer\Safari\WebKitPreferences

in Windows Vista?

:(

Thanks

by shah on Jun 1, 2009. Reply #

Awesome! thanks!

by Aashish on Jun 5, 2009. Reply #

Julian. I ran into the same problem even when using the DOM view. Turns out I was trying to edit attributes in the “Computer Style” panel. You can edit the panels below it that are specific to a selector (e.g. p,td,div)

by lucidus_neil on Jun 15, 2009. Reply #

In Vista I found the config at …

C:\Users\##USERNAME##\AppData\Roaming\Apple Computer\Safari\WebKitPreferences.plist

… if only Safari worked as well as IE we’d not need to bother!

Cheers.

by ndycrlr on Jul 8, 2009. Reply #

for Vista it’s much easier to turn on. stealing from the help file:

if the develop menu does not appear in the menu bar, open Safari preferences, click Advanced and select “Show develop menu in menu bar”

Allison Sheridan
NosillaCast Podcast
at podfeet.com

by Allison Sheridan on Jul 13, 2009. Reply #

thanks. this is perfect!!!!!! love it.

by cory on Sep 25, 2009. Reply #

You misspelled the file name up there:

~/Library/Preferences/com.apple.Safai.plist

Should have an ‘r’ in Safari. :)

by Wardeh on Nov 21, 2009. Reply #

You don’t need to mess with the defaults command or com.apple.Safai.plist. Just open Safari, go to Preferences and the Advanced pane. Enable the Develop menu.

by Timothy Hatcher on Jan 17, 2010. Reply #

Timothy, thanks, in previous versions of Safari I don’t believe that menu option existed…

by john on Jan 17, 2010. Reply #

Wow, great tips. Exactly what I’m looking for. Thanks!

by Monika Tanu on May 5, 2010. Reply #

Just figured this out now… can’t believe I hadn’t seen this before. What a great tool.
Thanks for posting!

by Phil on Jan 26, 2011. Reply #

Thanks Timothy! This was what I was looking for :)

by Sarala on Apr 12, 2011. Reply #

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>