How to Debug an iOS Website on Windows

how-to-debug-1Whereas debugging an iOS website on a Mac is relatively easy, troubleshooting becomes problematic for Windows users with no access to a Mac computer. Although it is slightly more complicated to debug on Windows, it is still possible to troubleshoot effectively. In fact, there are a couple of methods to choose from.

Use the Telerik Platform AppBuilder

Previously called Icenium Graphite, Telerik Platform AppBuilder enables users to connect an iOS device to Windows to inspect and troubleshoot a website. Although it works the same way as debugging in Google Chrome for Windows, it requires some additional setup.

Windows Firewall Settings

To allow traffic to reach your machine, you need to edit the settings for Windows Firewall. Do this by heading to “Inbound Rules” and checking the “Enabled” box.how-to-debug-2You can run any port, but if you use port 80, you can also modify the “World Wide Web Services (HTTP Traffic-In) rule.” However, bear in mind that if you do use port 80, you will need to limit traffic to “Domain” and “Private” networks. It is more secure to choose a different port and limit traffic to specific IP addresses.how-to-debug-3Web Inspector

Now you need to turn to your iOS device. To connect with iOS Safari, you need to enable Web Inspector. You will find the option to turn it on under “Advanced” under “Safari” in “Settings.”

Telerik AppBuilder

Telerik AppBuilder requires a license, but for your first time debugging you can utilize the trial option.

Create a new project and connect your iOS device to your machine using a USB cable. You will see the device in AppBuilder under “Devices.” Open Safari on your device and navigate to your website. It will appear with all the other open tabs under “Safari” in Web Inspector.

By clicking the bug icon, the “Developer Tools” window will open, leading you to all the same capabilities as you find in Google Chrome Developer Tools.

Use Valance from WebIDE

If you prefer to use Firefox Developer Tools over Chrome Developer Tools, a better option than AppBuilder could be WebIDE. To debug iOS on Windows, you need to utilize the experimental add-on Valence. It is important to note that this is still a new tool. As it has only been tested on Safari for iOS 6, 7, and 8, it may not work with other versions.

Installation

There is no need to install Valence if you already have WebIDE or Firefox 37 or later. If the debugging target fails to appear, the Valence add-on is likely disabled. Head to “Extensions” in “Add-ons Manager” to resolve the issue.

Setup

You will also need to enable Web Inspector on your iOS device. In “Settings,” head to “Safari” and then “Advanced.” Toggle “Web Inspector” to on.how-to-debug-4If you are using Windows Vista or later, there is no need for additional setup, as Valence contains and manages the proxy. However, if you are using Windows XP, you will need to download PowerShell.

For all versions of Windows, you will need to click “Allow” in the Firewall prompt the first time you launch the proxy. You will also need either iTunes or at least Apple Mobile Device and Apple Application Support installed.

Run Valence

Now you are ready to start using Valence. Connect your device to your machine using a USB cable and navigate to the page you want to debug on your browser. In the Web Developer menu in Firefox, open WebIDE and open the runtime list on the right of the toolbar. Choose “Safari, Firefox, and other WebViews on iOS.” Find the tab you want to troubleshoot on the left of the toolbar.

If you like my articles,