Safari’s Elusive Develop Menu

To be honest, I’m surprised to be making a post about this but I’ve been asked this question a few times in recent weeks. If you’re a hardcore developer or designer, you undoubtedly already know about this, but if you’re an amateur webmaster it might be new to you.

If you’re like me, perhaps the biggest pain when developing for mobile Safari is the inability to get a truly accurate rendering of your site without constantly flipping between your computer and your iPhone/Touch.

Fortunately, Safari offers developers a suite of tools featuring a page inspector, error console, Javascript debugger, the ability to enable and disable specific elements like style sheets or Javascript and last, but certainly not least– the User Agent toggle.

While toggling the User Agent is great for checking out how Mobile Safari is going to render a given element on an actual iPhone/Touch, I find myself using it just as frequently to test code that handles the detection of the wireless device.

The User Agent specification will only impact the current tab, leaving any other content you have open alone. Currently, Safari provides support for:

• Safari 4.0 and 3.2.3 (Windows & Mac)
• Mobile Safari 3.0, 2.2.1, 1.1.4 (iPhone & Touch packages)
• Internet Explorer 8, 7, 6, 5.5 and 5.2.3* (*mac only)
• Firefox 3, 2 and 1.5 (Windows & Mac)

But I don’t see the “Develop” menu in my toolbar?
Slow down Johnny, we hear you. In an effort to keep it out of the hair of the general public, this menu is not visible in Safari by default and must be activated.

To activate the Develop menu:

• From Safari’s “Edit” menu, select “Preferences” (View image)
• Select the “Advanced” icon from the Preferences display
• Checkmark “Show Develop menu in menu bar” (View image)