Jon Hartmann: Enabling Safari Developer Tools

Enabling Safari Developer Tools

April 28, 2011 12:44 PM
Browsers, User Interface Design, Software
Comments (41)

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.

Print
Send

Comments

This was driving me crazy - thanks for the instructions. Ridiculous that it's so hard to find.

Link
Posted By DeltaHF
7/24/11 6:22 PM

@DeltaHF Glad I could be of help.

Link
Posted By Jon Hartmann
7/25/11 7:56 AM

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.

Link
Posted By Scott R
8/25/11 3:01 PM

Thanks for the helpful post. I wonder why Apple tries to hide this feature...

Link
Posted By me
11/19/11 10:43 AM

Thank you, I don't think I would have ever figured this out!

Link
Posted By Nicole
7/12/12 10:04 AM

Thank you !!!!

Link
Posted By vasu
8/16/12 10:01 AM

Thanks for clearing the fog caused by Apple's interface.

Link
Posted By Eli
8/24/12 10:48 AM

Glad I could help! Its definitely not an easy feature to figure out.

Link
Posted By Jon Hartmann
8/24/12 10:50 AM

HATE THEM!!!!!!!!!!!!!!!!!! Thanks dude!! you saved my life!!

Link
Posted By Shlomi
8/27/12 1:18 PM

Thank you so much!!!

Link
Posted By dd
9/8/12 9:11 AM

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!

Link
Posted By Joel
10/24/12 7:54 PM

Thanks very much. Makes me think they might not want us debugging...

Link
Posted By Sam
4/11/13 12:14 PM

Thanks for your valuable post

Link
Posted By srilalitha
4/23/13 5:55 AM

Stupid Apple choice for their stupid users (sorry for hate).

Link
Posted By Alessandro
8/1/13 2:23 AM

Astounding how hard that was to find. Thank you so much for the article.

Link
Posted By Ethan
8/2/13 7:47 AM

Glad I could be of help!

Link
Posted By Jon Hartmann
8/2/13 10:26 AM

Can't believe it is that much trouble, spent ages trying to get this working! Good post!

Link
Posted By Matt C
8/22/13 11:33 AM

thanks a lot
apple fail!

Link
Posted By alex
10/3/13 7:29 AM

Thanks for the instructions, it was so difficult to find.

Link
Posted By primoz
11/19/13 8:52 AM

Thank you!!!

Link
Posted By Alan
12/4/13 3:54 PM

thx a bunch was little confused

Link
Posted By manavdeep brar
12/11/13 10:44 AM

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.

Link
Posted By W
12/16/13 6:30 PM

Thank You! That's a crazy amount of steps.

Link
Posted By Terri
12/17/13 10:19 AM

Thanks, still of use in 2014 :)

Link
Posted By Foobar
1/27/14 8:49 AM

Thanks for sharing nice and helpful information.

Link
Posted By GAM Software Solutions
3/24/14 5:46 AM

Ditto!

Link
Posted By iMackers
3/31/14 8:21 AM

The process is crazy! But your instructions were very helpful!

Thank you!

Link
Posted By Neo Ramos
4/21/14 11:34 AM

I bet you just saved a bunch of time. Thanks so much!

Link
Posted By missesanderson
7/18/14 6:19 PM

Thanks for this. Really good by you. Really bad by Apple.

Link
Posted By Jules
9/26/14 8:21 AM

Many Thanks

Link
Posted By pool
1/9/15 8:46 AM

Years after you wrote this post and it's still helping people! Well done!

Link
Posted By Simon
2/16/15 2:58 AM

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.

Link
Posted By Hippo
3/13/15 1:29 AM

Damn helpful, thanks!

Link
Posted By bishop
6/30/15 11:57 AM

Thanks, its still help full in 2016!

Link
Posted By Nitin
1/18/16 5:21 PM

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.

Link
Posted By Jon Hartmann
1/19/16 9:52 AM

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.

Link
Posted By Dan Scully
2/23/16 10:00 AM

Awesome, much appreciated

Link
Posted By Simon
8/1/16 12:12 PM

Years later we still need this to do something as simple as debug Safari.

THANK YOU!

Link
Posted By Andrew Crites
8/17/16 10:44 AM

@Andrew & @Dan - Glad it was helpful for you guys - everytime I think this post as out live its usefulness someone else writes in :)

Link
Posted By Jon Hartmann
8/17/16 12:58 PM

Thanks..I was finding it difficult to locate the Developer Options.. Your instructions were really helpful.. Thanks again..

Link
Posted By Nadeem
12/21/16 10:26 AM

Over a year after the last comment - and it's still useful today! Thanks!

Link
Posted By Scott Kondor
2/9/18 3:35 PM

Comments are not allowed for this entry.

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 on LinkedIn.

Jon Hartmann