I suspect that if you asked most designer-developers for the browsers they associate with web development, the majority would answer with the words Chrome Canary or Firefox Developer; Safari would likely run in a distant third place.

While it doesn’t advertise its toolset, Safari can be turned into a powerful development tool by following just a few steps. And as I’ll show in an upcoming article, taking the time to do so can make responsive design and testing far easier.

Set up Desktop Safari Developer Tools

1. Open the Safari Preferences window (Use the ⌘ + , keyboard shortcut or Safari / Preferences… from the menu).
2. Click on Advanced at the top of the window.
3. At the very bottom of the window, turn on the Show Develop menu in menu bar option, then close the window.

You’ll now see a Develop option added to the application menu, which contains a number of interesting options. The familiar console and Inspector are available from any tab in Safari by control-clicking, using the menu, or the appropriate keyboard shortcuts. (⌘+Opt+C and ⌘+Opt+I).

Set up Mobile Safari Developer Tools

At the same time that you set up Desktop Safari, it makes sense to set up the mobile version on every iOS device you have access to, as we’ll be using both together in the next article. To do so:

1. Touch the Settings icon on your iOS device.
2. Scroll to the Safari icon in the Settings panel and tap it.
3. Scroll to the bottom of the Safari Settings panel and tap Advanced.
4. Turn on the Web Inspector option.

With both versions set up, you’re now ready to use them together to power through testing your responsive designs on iOS far more efficiently, which I’ll address in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.