Mar 15 2008

“FireBug Like” Tools in Safari

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

29 responses so far

29 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!

  8. # Asish Mohapatraon 29 Aug 2008 at 4:18 am

    Good

  9. # Stuart Steelon 25 Sep 2008 at 6:45 pm

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

  10. # jeromeon 27 Sep 2008 at 4:10 pm

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

  11. # Tuan Ngoon 13 Nov 2008 at 12:45 am

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

  12. # Azeon 21 Nov 2008 at 3:44 am

    Nice,!

  13. # coolon 26 Nov 2008 at 8:33 am

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

  14. # Skylon 02 Feb 2009 at 9:02 am

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

  15. # Julianon 13 Feb 2009 at 9:16 pm

    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?

  16. # Willon 22 Feb 2009 at 8:19 pm

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

  17. # mickon 03 Apr 2009 at 4:11 pm

    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.

  18. # shahon 01 Jun 2009 at 7:31 am

    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

  19. # Aashishon 05 Jun 2009 at 1:31 am

    Awesome! thanks!

  20. # lucidus_neilon 15 Jun 2009 at 4:13 pm

    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)

  21. # ndycrlron 08 Jul 2009 at 8:52 am

    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.

  22. # Allison Sheridanon 13 Jul 2009 at 9:42 am

    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

  23. # coryon 25 Sep 2009 at 8:50 pm

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

  24. # Wardehon 21 Nov 2009 at 1:12 pm

    You misspelled the file name up there:

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

    Should have an ‘r’ in Safari. :)

  25. # Timothy Hatcheron 17 Jan 2010 at 1:43 pm

    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.

  26. # johnon 17 Jan 2010 at 1:45 pm

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

  27. # Monika Tanuon 05 May 2010 at 9:12 am

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

  28. # Philon 26 Jan 2011 at 11:49 pm

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

  29. # Saralaon 12 Apr 2011 at 7:37 am

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