Setting Up Safari For Web Development

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

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. Scroll to the bottom of the Safari Settings panel and tap Advanced.

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.