Debugging Mobile Safari Using Safari?

May 10, 2013 Interactive Design / Development 0

In this quick tutorial I am going to explain to you how to debug sites in mobile Safari on your iPad using a copy of Safari that is installed on your computer.

Yes, as strange as it may sound, it is possible and can be very helpful in trying to nail down quirky issues for your site. No, it is not very complicated, you just need the following:

  • An iPad
  • A computer running Safari (FYI, I have only tested this on a Mac running Safari 6)
  • A USB cable to attach your iPad to you computer

So let’s get to it…grab your iPad for the first few steps

Step 1.

On your iPad, go to the system settings, and then find “Safari” in the left hand column, tap on it


Step 2.

In the right hand column, scroll to the bottom until you see “Advanced”, tap on it


Step 3.

Locate the “Web Inspector” field, and tap/swipe to turn it on



Step 4.

You may now close the system settings and open Safari…navigate to, and plug your iPad into your computer


Step 5.

Open up Safari on your computer, remembering to have your iPad plugged in already.


Step 6.

From the Safari menu up near the Apple menu, choose “Preferences”…from the preference window that opens up, choose “Advanced” from the top navigation and then at the bottom, be sur that “Show develop menu in toolbar” is checked




Step 7.

Make sure that your iPad is still awake…from the “Develop” menu at the top of the screen you should now see your iPad listed as an option, mouse over it to see whether or not your iPad is set up properly and waiting to receive commands within Safari


Step 8.

Click on the page URL under Safari in the menu and it will open the Web Inspector window…as you click on and edit items, you will notice that your iPad is adjusting to show you how the changes you are making are affecting the site in question



That’s it, you now know how to debug your sites in Mobile Safari from your desktop using Safari