Debug iPhone Safari on Mac
When testing Apple Pay on our iPhones, you discovered a few bugs that necessitated a debugger.
Apple provides a remote debugger for the Safari web browser on your iPhone, iPod, or iPad in the latest iOS versions (v6 and up).
This is how you do it:
Step 1: On your iPad, iPhone or iPod, go to Settings > Safari > Advanced and toggle on Web Inspector
Step 2: On your Mac, open Safari and go to Safari > Preferences > Advanced, then check the Show Develop menu in the menu bar
Step 3: Connect your iOS device to your Mac with the USB cable
Step 4: On your Mac, restart Safari
Step 5: On your iOS device, open the website that you want to debug
Step 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 your iOS device does not have any web pages open, you will receive a warning that says "No Inspectable Applications."
Connecting the debugger
You may simply debug your website once linked to your iOS device from your Mac, just as you would if testing a website locally.
NOTE: Although the following instructions are written for an iPhone, they can also be used with an iPad or iPod.
Step 1: Open the page you wish to debug on your iPhone
Step 2: Go to Develop > iPhone > the webpage you want to debug in Safari on your Mac. On your Mac, this will launch a Safari Web Inspector window
Step 3: Using the Safari remote debugger on a Mac to debug your iPhone
Step 4: Open the debugger tab in Safari Web Inspector on your Mac, and tick the Breakpoint for All Exceptions box. Safari Web Inspector window on the Mac, debugger tab
Step 5: Interact with your website on your iPhone, resume script execution and inspect variables in the Safari Web Inspector window on your Mac until you identify the bugged code you're looking for. Then you should fix it.