Enabling Safari Developer Tools

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...":

Safari toolbar options

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

Opening Preferences in Safari 5.05

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

'Enabling' the Developer menu

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.

Mysterious New Toolbar 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.

Web Inspector icon in place

Click the button, and you get the developer tools:

Developer tools finally open

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.

 

Comments

DeltaHF's Gravatar This was driving me crazy - thanks for the instructions. Ridiculous that it's so hard to find.
Jon Hartmann's Gravatar @DeltaHF Glad I could be of help.
Scott R's Gravatar It's weird that an application preference is in the application's preference dialog.

Having said that, a tip: right-click > Inspect Element is often handier than the Web Inspector button, and doesn't take any space on the menu bar.
me's Gravatar Thanks for the helpful post. I wonder why Apple tries to hide this feature...
Nicole's Gravatar Thank you, I don't think I would have ever figured this out!
vasu's Gravatar Thank you !!!!
Eli's Gravatar Thanks for clearing the fog caused by Apple's interface.
Jon Hartmann's Gravatar Glad I could help! Its definitely not an easy feature to figure out.
Shlomi's Gravatar HATE THEM!!!!!!!!!!!!!!!!!! Thanks dude!! you saved my life!!
dd's Gravatar Thank you so much!!!
Joel's Gravatar Thank you! You are correct, it is easier on the mac. Just go to Safari-preferences-advanced-show develop menu in toolbar. Then click on the develop drop down and show web inspector. I wouldn't have found it without you either!
Sam's Gravatar Thanks very much. Makes me think they might not want us debugging...
srilalitha's Gravatar Thanks for your valuable post
Alessandro's Gravatar Stupid Apple choice for their stupid users (sorry for hate).
Ethan's Gravatar Astounding how hard that was to find. Thank you so much for the article.
Jon Hartmann's Gravatar Glad I could be of help!
Matt C's Gravatar Can't believe it is that much trouble, spent ages trying to get this working! Good post!
alex's Gravatar thanks a lot
apple fail!
primoz's Gravatar Thanks for the instructions, it was so difficult to find.
Alan's Gravatar Thank you!!!
manavdeep brar's Gravatar thx a bunch was little confused
W's Gravatar you just make my day! For something that claims to be "user friendly" they couldn't hide it better. And yeah, just like you said it: Apple webpage is useless.
Also, for a company that was once one of the pioneers in web standards they drift pretty far away lately.
Terri's Gravatar Thank You! That's a crazy amount of steps.
Foobar's Gravatar Thanks, still of use in 2014 :)
GAM Software Solutions's Gravatar Thanks for sharing nice and helpful information.
iMackers's Gravatar Ditto!
Neo Ramos's Gravatar The process is crazy! But your instructions were very helpful!

Thank you!
missesanderson's Gravatar I bet you just saved a bunch of time. Thanks so much!
Jules's Gravatar Thanks for this. Really good by you. Really bad by Apple.
pool's Gravatar Many Thanks
Simon's Gravatar Years after you wrote this post and it's still helping people! Well done!
Purusha Suktha Homam's Gravatar I have already recommended your site to others.
Hippo's Gravatar Even after so long, it's still a useful piece of information; thanks for probing and producing one of the best results I've had with Safari.
bishop's Gravatar Damn helpful, thanks!
Nitin's Gravatar Thanks, its still help full in 2016!
Jon Hartmann's Gravatar Thanks! I continue to be amazed by the longevity of this post! I guess it has to do with a lack of updates for Safari over all, but I'm still shocked by it.
Dan Scully's Gravatar Thank you. We are testing a program over various browsers and needed to track the issue in Safari. 2+ years later and this post is still useful! Thank you.
Simon's Gravatar Awesome, much appreciated
Andrew Crites's Gravatar Years later we still need this to do something as simple as debug Safari.

THANK YOU!
Jon Hartmann's Gravatar @Andrew & @Dan - Glad it was helpful for you guys - everytime I think this post as out live its usefulness someone else writes in :)
Nadeem's Gravatar Thanks..I was finding it difficult to locate the Developer Options.. Your instructions were really helpful.. Thanks again..
Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me.

Post a job. Find one. authenticjobs.com

Interested in becoming a sponsor? Contact me.