Minutiæ:

Notice: I have neither posted nor updated any content on this blog since the mid 2010's. (😱) Please check out the homepage and my bio, for more recent information.

Ever have a rendering issue on iOS browsers while you’re working on a website/web app?

Here’s a neat trick that I’ve taught a few people over the past couple weeks: you can use desktop Safari to help debug issues that arise on iOS Safari. You can do this on the iOS Simulator, too, which can help you debug rendering issues on iPhone and iPad, retina and non-retina, even if you don’t have one of those devices.

iOS Simulator

To do this using the iOS Simulator, you’ll want to download and install a recent version of Xcode, first.

To get to the iOS Simulator once you have Xcode installed, open up Xcode and then in the top-right "Xcode" menu (next to the "Apple Menu"), go to Open Developer Tool->iOS Simulator. After a few seconds of loading, an iOS home screen should appear.

Hint 1: You can change devices and iOS versions by going to the Hardware->Device menu. (If you want to test older versions of iOS, go to Xcode, then open the preferences — Xcode menu->Preferences. Then under the "Downloads" tab, you can choose to download various iOS simulators under the "Components section".)

Hint 2: you can trigger the "home button" action by pressing ⌘⇧H, command-shift-H.

In your iOS Simulator, open Settings and go to the settings pane for Safari. Under "Advanced", make sure "Web Inspector" is turned on.

Now open Safari in your simulator and browse to whatever page you wish. (Since the Simulator runs within your own computer, you can even debug sites under 127.0.0.1 without having to worry about port/IP address permissions — it’s just another local web browser.)

Open your Mac’s desktop Safari. In preferences, go to the "Advanced" tab and make sure "Show Develop menu in menu bar" is checked.

Now, under the "Develop" menu, you should see "iPhone Simulator" or "iPad Simulator" a few options down from the top. Select the tab that corresponds with the page you have open and you'll see the standard Safari web inspector acting on the browser in your simulator.

iOS Device

Now, for an even cooler trick, try the above on an actual, physical device. Plug your device into your computer; if you’re on iOS 7 you may have to tell your device to “trust” the machine. Follow the steps above. Magic!