Enabling the Safari and Webkit Debug Menu and Developer Tools

07 Feb 2009 4 Comments

Safari is Apple’s web browser based on the open source Webkit engine, and according to the Acid3 Browser Test Safari (with a score of 71 / 100) and the latest build of Webkit (with a score of 100 / 100) are the two of the most standards-compatible browsers available. For comparison, Firefox 3 scores 71 / 100, and Internet Explorer 7 scores 11 / 100.

In addition to their high levels of web standards compatibility, both browsers have extensive developer tools that can be enabled from the command line. To do this, quit Safari and Webkit, open a Terminal window, and type these commands:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true
defaults write com.apple.Safari IncludeDebugMenu 1


Close the Terminal window and launch Safari and / or Webkit to see the new ‘Develop‘ menu that’s been added to the menubar. This menu lists options such as selecting a User Agent, launching Web Inspector / Error Console / Network Timeline / Snippet Editor tools, toggling Caches, toggling Images, toggling Styles, toggling JavaScript, etc.

safari-webkit-develop-tools-menuAdditionally, you’ll now be able to right-click on a page element and choose the ‘Inspect Element‘ menu option to see a collapsible version of the page’s source code, time- or size-based charts of the page’s loading process, Scripts debugging output, and Database Information.

safari-webkit-develop-tools-inspector-1safari-webkit-develop-tools-inspector-2

 

Related posts:

  1. Safari 4 Quick Tip: Enable / Disable new features
  2. The performance of popular web browsers in the Acid3 test
  3. Warn visitors to upgrade from Internet Explorer 6 (IE6) with a simple JavaScript
  4. Changing the Mac OS X Login Window’s background image
  5. Making hidden application icons transparent on Mac OS X
Twitter Digg Delicious Stumbleupon Technorati Facebook Email
apple, javascript, tips & tricks, web dev
, , , , , , , , ,

4 Responses to “Enabling the Safari and Webkit Debug Menu and Developer Tools”

  1. Michal Kočárek Reply 17 Jul 2009 at 13:16

    For Safari 4 on Windows, there is different approach how to enable the Web Inspector.

    I opened %ProgramFiles%\Safari\Safari.resources\Defaults.plist and added
    WebKitDeveloperExtras

    IncludeDebugMenu
    1
    right before last element. Then everything worked fine.

  2. Michal Kočárek Reply 17 Jul 2009 at 13:23

    Safari 4 on Windows
    UPDATE to previous comment! (This page does not allow to enter < and > (angle brackets) into comment box)

    1) Take following text and replace [lt] and [gt] with appropriate angel brackets (less-than and greater-than sign)
    [lt]key[gt]WebKitDeveloperExtras[lt]/key[gt]
    [lt]true/[gt]
    [lt]key[gt]IncludeDebugMenu[lt]/key[gt]
    [lt]integer[gt]1[lt]/integer[gt]
    2) Put the modified text to end of the %ProgramFiles%\Safari\Safari.resources\Defaults.plist right before the [lt]/dict[gt] closing tag.

  3. willem Reply 19 Jul 2009 at 19:07

    Thanks, Michal!

  4. Oleksandr Balyuk Reply 08 Sep 2009 at 17:47

    Michal Kočárek – thank you.
    Works like a charm!

Afrigator