Remote Debugging Webpages In iOS Safari

Remote debugging webpages in iOS Safari connects Safari's Web Inspector on a Mac to a live page open on a connected iPhone or iPad.

Apple restricts this native workflow to macOS and Safari 6 or later, though since iOS 16.4 the same Web Inspector also attaches to any browser built on WKWebView, such as Chrome or Firefox on iOS.

This guide covers debugging iOS Safari on OS X, whether Chrome and Firefox on iOS support the same Web Inspector workflow, and remote debugging on Windows and Linux.

Remote Debugging iOS Safari on OS X

Before starting with the debugging process, you would need a device running iOS. It may be any device like an iPad or an iPhone which can be connected to a Mac computer by USB, plus the right iOS testing tools. Safari version 6 or later must be installed on the computer. Without a Mac, you can test on Safari browsers online instead.

The next step demands you to enable ‘Web Inspector’ on your iOS device. This can very easily be done by going to Settings > Safari > Advanced. Toggle the ‘Web Inspector’ so that it gets enabled in case it was not by default.

After successfully enabling ‘Web Inspector’, you should also enable the ‘Develop’ menu in Safari on your Mac computer, covered in the Safari Developer menu guide. This can be done by going to Safari > Preferences > Advanced and checking the checkbox for Show Develop menu in menu bar. In case it is already enabled, you do not need to do anything.

Further, you need to open the web page you want to debug on your computer. Make sure that your iOS device is plugged into it. Go to Develop > iOS Device Name in desktop Safari browser. Click on the page you want to debug.

Finally, you can view and update the Document Object Model, have access to JavaScript console and other options and features.

Note: Try LT Debug Chrome Extension for debugging websites!

Remote debugging iOS Safari on Windows and Linux

Safari was never released for Linux, and Apple stopped updating Safari for Windows years ago, which is why remote debugging from either platform needs a workaround, such as a cloud service to test Safari on Linux.

Although not many options are available for remote debugging Safari from Windows or Linux, the situation is not as hopeless as it seems. A popular way out is to call an application called JSConsole, one of the best debugging tools available without a Mac, to your rescue. The application works in an interesting way by inserting a script tag into the target web page that overrides the console behavior.

To begin with, go to jsconsole.com and execute: listen in the prompt. This will present you with a unique session ID and a script tag which you further insert into your mobile web page. Hence, any console output that your mobile page generates will be shown on the console open in your desktop web browser. This includes all the errors too. Thus, this gives you an alternate path to remotely debug iOS Safari. Although, it is not a replacement for a full web inspector, in fact, stands nowhere near to it, but is a good way out when you don’t have access to Mac.

Developers without a Mac can also try iOS emulators for PC to approximate the device environment, though neither method matches native Web Inspector access.

Thus, this was a quick overview of the process of remotely debugging iOS Safari both on Mac as well as non-Mac platforms. Happy debugging!