Debug iOS Safari from your Mac

When we were testing our implementation of Apple Pay on our iPhones, we found a few issues where we needed a proper debugger. This post describes how to set one up, connected to your phone so you can figure out what went wrong.

Setup

On recent versions of iOS (v6 and up), Apple offers a remote debugger for your iPhone, iPod or iPad’s Safari web browser.

Here’s how you set it up

1. On your iPad, iPhone or iPod, go to Settings > Safari > Advanced and toggle on Web Inspector.
2. On your Mac, open Safari and go to Safari > Preferences > Advanced then check Show Develop menu in menu bar.
3. Connect your iOS device to your Mac with the USB cable.
4. On your Mac, restart Safari.
5. On your iOS device, open the web site that you want to debug.
6. On your Mac, open Safari and go to the Develop menu. You will now see the iOS device you connected to your Mac.

NOTE: If you do not have any web page open on your iOS device, you will see a message saying “No Inspectable Applications”.

Connecting the debugger

Once connected to your iOS device from your Mac, you can easily debug your web site just as you would if you were testing a web site locally.

NOTE: The following instructions describe working with an iPhone, but they work just as well with an iPad or iPod.

1. On your iPhone, open up the website you want to debug; in our case, www.busbud.com
2. On your Mac, in Safari, go to Develop > iPhone > www.busbud.com. This will open a Safari Web Inspector window on your Mac.
   
3. On your Mac’s Safari Web Inspector window, fire up the debugger tab, check off the Breakpoint for All Exceptions.
   
4. On your iPhone, interact with your website, and on your Mac’s Safari Web Inspector window, resume script execution and inspect variables until you find the bit of buggy code you were seeking. Then fix it ⚡️.

Happy debugging!

Mike Gradek
Busbud CTO and Co-Founder

Source: Busbud engineering