IOS – Debugging Web app running on a specific (older) version of Safari for iOS

iosipadsafari

We have an issue with our website and a client's iPad.

We have a button on our website. The action of this button is handled by jQuery. The button works perfectly on everything we have tested it on, including our own in-house iPad(s).

A Client of ours, however, is having no such luck. Whenever they tap on the button in their iPad, nothing happens. We have watched them do this in fullstory multiple times, consistently they try to tap the button, but nothing happens.

On every iPad we have tested, the button works. All except this one client's iPad. Safari is the browser used by all of us.

Looking at the User Agent string, the only difference we can see is that we are running iOS version 9.3.5, whereas the client's version of iOS is 8.2.0.

We want to do everything we can to recreate the issue that the client is experiencing. so is it possible to install iOS 8.2.0 onto one of our iPads in order to try and re-create the problem?

Is there a way to recreate the same software environment (Safari running on iOS 8.2.0) that our client is using to debug the issue with our website?

Best Answer

We want to do everything we can to recreate the issue that the client is experiencing. so is it possible to install iOS 8.2.0 onto one of our iPads in order to try and re-create the problem?

Is there a way to recreate the same software environment (Safari running on iOS 8.2.0) that our client is using to debug the issue with our website?

While it is not possible to downgrade the version of iOS installed on your iPads, there is certainly a way to help resolve your issue.

What you are looking for is a way to debug the Web app running in Safari for iOS running on iOS 8.2.0. This can be accomplished without having a physical iPad running iOS 8.2.0, i.e. you can accomplish the same using iOS Simulator. But, you'll need a Mac to do this.

Once you have the Mac handy, follow the steps as mentioned below (skip the ones that are not applicable):

  1. Install Xcode from the Mac App Store.

  2. Once Xcode is installed and setup, launch Xcode go to Xcode preferences → Components → Simulator in the Menu.

  3. Download iOS 8.2 simulator by clicking on the down arrow icon shown besides iOS 8.2 Simulator.

enter image description here

  1. Check that the iOS 8.2 Simulator is successfully installed by the presence of blue tick-mark shown besides iOS 8.2 Simulator.

enter image description here

  1. Launch Simulator.app by launching Xcode.app and going to Xcode → Open Developer Tool → Simulator in the Menu Bar.

  2. In the Simulator, go to Setting app → Safari → Advanced and turn on the toggle next to Web Inspector.

enter image description here

  1. To easily access the Simulator subsequently, you can right click on the Simulator icon in the Dock and choose Options → Keep in Dock.

  2. Now open Safari.app in macOS.

  3. Go to Safari → Preferences → Advanced and check Show Develop menu in menu bar.

enter image description here

  1. In the Simulator app go to Hardware → Device → iOS 8.2 in the Menu and select the desired model of iPad from the available options (iPad 2/iPad Retina/iPad Air) that best matches your client's device.

  2. Launch Safari on the iPad and open the desired Web page.

  3. Now switch to Safari for macOS and go to Develop → Simulator - iPad - iOS 8.2 → Safari (website) in the Menu bar.

  4. Voila! you can now easily debug the issue with you Web app.

enter image description here

Note: In my test-run, I have observed that I was not able to get iPad 2 and iPad Retina (both running iOS 8.2) to show up in desktop Safari's Develop menu, only iPad Air. This may not be the device used by your client but it best matches with your clients environment.

Also, Apple recommended to upgrade to the latest version of iOS available for your device. You may also advise your client to upgrade iOS on their devices (unless they have a specific reason not to do so).

Related Question