Remote Debugging Webpages In iOS Safari

Safari is one of the most popular web browsers. Developed and promoted by Apple , it is based on the WebKit engine. The first version of the browser was released in 2003 with Mac OS X Panther. With the launch of the iPhone in 2007, a mobile version of the browser has been included in iOS devices as well.

Unless specifically changed by the user, Safari is the default browser on all Apple devices and it is one of the main reason why it is still popular among internet users.

Developing web pages or debugging hybrid applications is tough. However, to the utter delight of all computer science professionals, Apple offers a remote ‘Web Inspector’ for debugging.

Remote debugging, is debugging a piece of code by connecting the application running remotely with your environment of development. Generally, developers do this using a debugger which has support for remote debugging, and a small debug server running on a remote machine.

This small debug server must allow the debugger to interact with the code running on the remote machine as if it were running on the same machine.

Remote debugging Safari can be painful especially if you are not a Mac user. Web developers, generally are familiar with the tools available to them while local page testing, but face problems while debugging applications developed for mobile devices such as the iPad or iPhone.

A possible solution to the problem is remote debugging – making use of the same tools as you would have used while performing the task on a desktop, except for the fact that now you are connected to your mobile device. Debugging safari on iOS requires a minimum of Safari 6. However, there is a bad news for Windows and Linux developers here as the latest version of Safari is not available at all for Linux while for Windows only Safari 5 is available.

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. Test on safari browser version 6+ must be installed on the computer.

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. 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.

Remote debugging iOS Safari on Windows and 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 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.

Now test Safari on Linux online & start your free testing!!!

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!