iOS Web Inspector on Windows with Telerik AppBuilder

By March 4, 2014Telerik, Tools, Web

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

In order to connect to iOS Safari, we need to enable the Web Inspector in iOS.  Go to Settings > Safari > Advanced and turn on the “Web Inspector” option.  Seen here on iPad:

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:

You now have all the capabilities of Google Chrome Developer Tools for your iOS browser.  As you hover over elements in the Debug window, you will see them highlighted in the iOS browser.  You can set JavaScript breakpoints, view network traffic, and use the console through the Debug On Device 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.

The following two tabs change content below.
  • Ian

    I think you need iTunes installed ?

  • Ангелов

    Looks like this is no longer working with iOS 8… 🙁

    • Mohammad Ahmed

      I have 8.3 and its working fine 🙂

  • Pingback: How To View iOS Console on Windows - Frankly Sean()

  • Chris Beaudette

    Great instructions, thanks for sharing. The only issue I have with the Windows client is that the resize control is never deactivated for the right-hand pane (styles, etc.), so anytime I mouse over it the resize control kicks in keeps resizing the panel, window. [Esc] has no effect. It’s pretty annoying in an otherwise very useful tool. I installed the AppBuilder plugin in Visual Studio and the window behaves better, but the interactive inspect doesn’t work like it does in the Windows client, where hovering over the code in AppBuilder highlights the feature on the iPhone.

  • Bill Pullen

    This looks like a good solution and currently telerik is seeing my device and safari but when I select safari it says “Cannot show application views when no app is selected” this also seems to be slightly newer version of AppBuilder

    • Giorgio Beggiora

      did you find a solution? i have this problem too

      • Bill Pullen

        I did manage to get it to work I believe I think I had to install itunes

  • Ricardo Aguirre

    not work on ios ios 8????????????????????????????????! -_-

  • Mohammad Ahmed

    worked perfectly 🙂
    without “1. Modify Windows Firewall” step
    thankx man.

  • kanika

    my device is not detected in telerik appbuilder . please help