DEV Community

Cover image for Remote debugging using Safari on iOS devices with macOS
Nima Jafari
Nima Jafari

Posted on

Remote debugging using Safari on iOS devices with macOS

Apple's integration between macOS and iOS provides a native and efficient pathway for developers to debug web content directly on an iOS device from a macOS computer. This guide will cover the essential steps and tools required to set up a remote debugging session between Safari on an iOS device and a macOS computer.

Before to start remote debugging:

  1. Enable Develop on your Mac Safari through Safari Settings > Advanced Settings.
  2. On your iOS device, head over to the Settings > Safari.
  3. Find the Advanced section, then enable Web Inspector there.

Image description
You can now start remote debugging:

  1. Connect your iOS device to your Mac using a cable.
  2. On the Safari browser on your iOS device, open the desired URL that you are going to debug.
  3. On your macOS system, from the Develop menu on Safari, find your iOS device name and click on the page that you have already opened on your phone or tablet.

Image description
In the opened Web Inspector, you are able to debug the web page.

Image description

Conclusion

In this article, the remote debugging steps with an iOS device on a macOS system using the Safari browser on both sides was explained.
It is a practical web page investigation method which provides your the possibility to find mobile issues including mobile-friendliness and user experience with an iPhone or iPad view.

ℹ️ You may also want to read:
πŸ”—Remote debugging using Google Chrome on Android devices with Windows
πŸ”—Remote debugging using Firefox on Android devices with Windows
πŸ”—Remote debugging using Google Chrome on iOS devices with macOS

πŸ“Resource: https://www.oxyplug.com/optimization/ultimate-guide-to-remote-debugging-webpages/

Top comments (0)