If you have a Mac, you already have tools to inspect and debug web pages on your iOS device. But what if you need to troubleshoot a problem with a web application on iPad when you are running Windows? Google Chrome Developer Tools has Emulation options to run a tab as an iPad in your desktop browser, but it will never be a perfect representation of how the web page will work on an iOS device.
Fortunately, the Telerik Platform AppBuilder (formerly Icenium Graphite), allows you to connect your iOS device to inspect and debug just like you would in Google Chrome for Windows. I will walk you through the steps to set up your Windows machine and iPad to debug a local web application. If you only need to debug a public URL, you can skip to step 2.
1. Modify Windows Firewall
If you need to debug a web site running on your local machine, you will need to modify Windows Firewall settings to allow traffic to reach your local machine. For this example, I will be running my site with IIS on port 80, but you can set up an inbound rule for any port.
First, open Windows Firewall Advanced Settings and select “Inbound Rules.” If using port 80, you can modify the existing “World Wide Web Services (HTTP Traffic-In)” rule.
If it is not enabled already, select the “Enabled” box:
And rather than leave port 80 open to the public, we will limit traffic to Domain and Private networks. NOTE: A more secure option is to limit traffic to specific IP addresses and choose a port other than 80.
2. Enable Web Inspector in iOS
3. Install Telerik AppBuilder
Now install the Telerik AppBuilder Windows Client (formerly Icenium Graphite). If you do not have a license for Telerik Platform, they provide a free trial.
Once you have AppBuilder installed, you can create a blank project (I reuse a project I named “iPad Debugging”). Connect your iOS device via USB cable to your computer and you will see it connected in the Devices tab.
Open Safari on your iOS device and you will see your open tabs listed under Web Inspector > Safari in the AppBuilder Devices tab. Click the “bug” icon to open the Deverloper Tools window:
If you are debugging a local application, you will need to navigate to the IP address of your development machine on the iPad to browse and then debug the site.
Do you have other tools you use for iOS web debugging? Let me know in the comments.