Debugging Mobile Safari Using Safari?
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
On your iPad, go to the system settings, and then find “Safari” in the left hand column, tap on it
In the right hand column, scroll to the bottom until you see “Advanced”, tap on it
Locate the “Web Inspector” field, and tap/swipe to turn it on
You may now close the system settings and open Safari…navigate to http://seantierney.com, and plug your iPad into your computer
Open up Safari on your computer, remembering to have your iPad plugged in already.
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
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
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