How to use the Web Inspector on Safari for iOS

Websites are not always accessed from desktop systems. Mobile devices also have browsers and they are used to access websites, if not more often, than on desktops. In rare cases, popular websites will have a mobile app but most websites do not have one. Therefore the website needs to work to some extent on both desktop and mobile browsers. To ensure that websites have to be debugged during development on mobile web browsers, where you run into problems due to desktop issues such as not having a console.

Need to access the console for Mobile Chrome on Android? Check out our guide.

Web Inspector on Safari

If you are debugging websites on iOS on Safari, you can use Safari’s built-in web inspector. The only restriction is that you need a Mac. Web Console on Mobile Safari is accessed via Safari on Mac. It takes some time to set up.

iCloud account

To use Web Inspector on Safari, iOS devices and Macs must use the same iCloud account and set Safari to sync.

Mac OS

  1. open system Preferences.
  2. Go for Apple id (Take note of the ID that is in use).
  3. Choose iCloud In the left-hand column, and make sure Safari enabled In the right-hand pane.
  4. open Safari.
  5. Click on Safari in the menu bar and select like.
  6. On Safari Preferences, Go to advanced tab.
  7. Enable ‘Show menu in menu bar’.

Ios

  1. Open up Adjustment Application.
  2. Tap your account at top.
  3. Make sure The Apple ID used is the same as that used on the Mac..
  4. Tap iCloud.
  5. Enable iCloud for Safari.
  6. Return to main Settings application screen.
  7. Go for Normal And scroll to the bottom.
  8. Go for Reset> Reset Location and Privacy.

Enable web inspector

Now you are ready to connect iOS device to your Mac.

  1. using a data cable, Connect iPhone (or iPad) to Mac.
  2. On your iPhone, you will get a prompt asking if the computer it is connected to should be trusted. Tap trust, And enter Passcode to your device.
  3. Open Safari on iPhone and Go to the website you want to debug.
  4. On mac, Open safari And go to develop. Your iphone Should appear in the sub-menu. Select it, And Select website That you want to debug. It will appear in the sub-menu.
  5. A new window will open with Web inspector.

Troubleshooting

In some cases, the above method may not work. This is a bug with macOS. One thing that works in almost all cases is the fix under Howe, do the following after following the steps in the previous section.

  1. Disconnect iphone From mac.
  2. Open up Settings app on iPhone.
  3. Go for General> Reset> Reset Location and Privacy.
  4. But iTurn off the phone, wifi, turn on Bluetooth, And Turn on mobile hotspot.
  5. Connect iPhone to Mac. Trust computer When prompted on the iPhone.
  6. open Safari on iPhone, And Visit website You want to debug.
  7. On Mac, open Safari.
  8. Go for Develop> Your iPhone> Connect via Network.
  9. Next, go to Select Develop> Your iPhone> Website Open in Safari on iPhone.

The conclusion

Debugging a website in Safari for iOS can only be done by you having a Mac. You need to make sure that the version of Safari on iOS is on the Mac itself. It is a good rule to always run the latest stable version of iOS and macOS when you debug a website. This will ensure that Safari’s version is the same on both platforms.

The post How to Use Web Inspector on Safari for iOS first appeared on TechtricksNg.

Leave a Comment

Advertisements
×