“FireBug Like” Tools in Safari

March 15, 2008

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 at 12:43 am. 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 at 7:06 am. 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 at 7:34 am. Reply #

Very useful. Thanks.

by Miro on Mar 17, 2008 at 6:13 pm. Reply #

this is great! thanks a lot

by jonah on Mar 18, 2008 at 4:39 pm. Reply #

thanks guys!!

by dannyrocks on May 28, 2008 at 12:12 pm. Reply #

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

by Lee Floyd on Jun 11, 2008 at 7:45 am. Reply #

Good

by Asish Mohapatra on Aug 29, 2008 at 4:18 am. 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 at 6:45 pm. 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 at 4:10 pm. 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 at 12:45 am. Reply #

Nice,!

by Aze on Nov 21, 2008 at 3:44 am. 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 at 8:33 am. Reply #

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

by Skyl on Feb 2, 2009 at 9:02 am. 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 at 9:16 pm. Reply #

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

by Will on Feb 22, 2009 at 8:19 pm. 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 at 4:11 pm. 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 at 7:31 am. Reply #

Awesome! thanks!

by Aashish on Jun 5, 2009 at 1:31 am. 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 at 4:13 pm. 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 at 8:52 am. 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 at 9:42 am. Reply #

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

by cory on Sep 25, 2009 at 8:50 pm. 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 at 1:12 pm. 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 at 1:43 pm. Reply #

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

by john on Jan 17, 2010 at 1:45 pm. Reply #

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

by Monika Tanu on May 5, 2010 at 9:12 am. 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 at 11:49 pm. Reply #

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

by Sarala on Apr 12, 2011 at 7:37 am. Reply #

Post a comment:

Required.

Required. Not published.