Websites are accessed across several kinds of devices and not only desktops. Phones, tabs, etc, all have their browsers, and websites are accessed via them. There is the most limited chance of finding some websites with mobile applications but most do not have them. That is the sole reason a web app should be compatible on all platforms. To do this, they need to debug the apps on mobile sites as it becomes difficult due to the absence of console or developer tools like in the case of desktop.
Need for Web Inspector
Safari has its own web inspector if you need to debug web apps on safari. But, the same operation requires you to have a Mac, as the web console on mobile Safari can be accessed using Safari on a Mac system only.
The setup is a little complicated. So here’s how you can proceed.
iCloud account requirement
You need an iCloud account shared across the iOS device and Mac to sync Safari and get working.
What to do on the macOS?
- Go to the System preferences and select the Apple ID (take note of the one in use)
- Now, on the left column find iCloud. Also, ensure that Safari is working. You can check that on the right pane of the screen.
- Open Safari, and in the menu bar select Safari and then Preferences.
- Now, in the preferences check for the Advanced tab.
- Select the Advanced tab and then enable the ‘Show Develop menu in menu bar’ option.
What to do on iOS?
- Go to the Settings app and click on your account at the top of the screen.
- Ensure you are using the same apple id as you mentioned in the Mac system.
- Then go to iCloud and enable the same for Safari.
- Next, return back to the main Settings screen.
- Then go to General settings and scroll to find Reset and then go to Reset Location and Privacy.
How to Enable the Web Inspector?
As you go through the steps, you are now ready to get connected between both systems.
- Take a data cable to connect your iPhone/iPad to your Mac.
- Now you will get a Permission prompt for connecting your phone. Mark your phone as a Trusted connection and get in by entering the passcode of your device.
- Now, open safari and launch the website you wish to debug.
- On the Mac system, again open Safari and go to Develop. When you do this, you will be able to see your iPhone in the sub-menu.
- Select your device and then select the website you wish to debug and it will also display in the sub-menu.
- Now, a new window will open up in the web inspector.
How to handle Troubleshooting?
While the above-stated method might help you, you can also expect it not to work at times. This happens if you have a bug in the Mac OS. The following troubleshooting method might prove to work in a good way.
Note: Try this, if you have first tried connecting in the above method.
- First things first, disconnect your iPhone from your Mac.
- Then go to the Settings app on your phone and then go to General -> Reset -> Reset Location and Privacy.
- Next, on your phone, turn off the Wi-Fi but switch on the Bluetooth and then turn on the mobile hotspot.
- Then reconnect your phone to your mac and give it the permission as a trusted device again.
- Now, open Safari on your phone and go to the website you wish to debug.
- Once you are done on your phone, next on your Mac, also open Safari.
- Then in Safari, go to Develop -> Your Phone -> Connect via Network
- And then, go to Develop -> iPhone -> Select the website open in Safari on your phone or the website you wish to debug.
So all in all, the method is pretty similar except for a few steps.
Summarizing the article, this whole process can be worked out only if you own a Mac along with your iPhone as well. Also, you need to ensure that Safari versions are the same on both the devices and at the same time, a stable version. Just follow the steps, and you will be good to go!
