Jon Hartmann

Enabling Safari Developer Tools

• April 28, 2011 12:44 PM
• Apple, User Interface Design
• Comments (4)

I was trying to diagnose a problem with an application today that only seems to be present in Safari. This lead me to think of Safari's Developer Tools, which I remembered were pretty comparable to Firebug for FireFox. My biggest problem was figuring out how to TURN THEM ON.

Thats right... the developer tools are included with Safari, but good luck finding them. I'd have thought that it would be easy, especially since Safari has a neat drag-and-drop customization system for its toolbars and icons under Settings (the cog) > "Customize Toolbar...":

It looks pretty, but none of them are the Developer Tools. Once I realized I couldn't find a menu option, I had to go hunting.

Googling Gets Me Almost There

Apple's official Developer Tools page is pretty useless, despiting being the first result, their website just says "All of Safari's powerful developer tools are easily accessible from the Develop menu." Which is pretty much useless unless you know where the "Developer menu" are located. Finally, after searching for "where is safari developer menu" I found this article that tells you how to turn them on, EXCEPT that after completing the steps, the developer window still did not appear.

How to Turn on Safari Developer Tools

In the end, you need to do everything in the About.com article, but thats not all you need to do. Please note that these instructions are for Safari version 5.05 for Windows. I'm not sure if this is easier on the Mac.

Step 1: Turn on "Developer Menu"

Go to to the Settings menu (thats the cog in the corner), and click on "Preferences...".

Once you've opened the Preferences window, click on the "Advanced" tab, and you'll see "Show Developer menu in menu bar". Click it, and then close the window (there is no save button).

If you go to the Settings menu now you should see the "Developer menu"... except that you don't. You're not done yet.

Step 2: Find the "Web Inspector" button

Remember that spiffy list of options you had for the tool bar earlier? Open it again and you'll see a new option.

Although it says nothing about being a "Developer menu", go ahead and drag the "Web Inspector" icon up to the toolbar; I chose to place it near the Settings Menu.

Click the button, and you get the developer tools:

Why All That Trouble?

In the end... why couldn't the Web Inspector be labeled "Development Tools" and put in the tool bar options from the beginning. If I have to drag an icon out to get access to it, why do I have to enable it first? Bad user-interface design in my book.

• Print
• Send
• Digg It!