I find a lot of my development time is spent working on iOS devices. This proves to be a little difficult for me… because I’m a PC. I have nothing against Macs though. They are wonderful machines if you are willing to pony up the extra cash for one.

The one major advantage Macs have had for me over PC’s (until today) is the ability to utilize the webkit debugging tools in Safari/Chrome. On a Mac you could simply plug in your device and test away. On Windows…. not so much.

Today everything has changed. I can now see my iOS’s javascript console on my PC!

Option A: iOS Webkit Debug Proxy

Arty Gus has ported the ios-webkit-debug-proxy for Windows. The original project states that “Windows support is planned but not implemented yet”. I don’t know if they are going to implement it at all as the last update to the project was 7 months ago, but the port from Arty works pretty well!

Setting up the iOS Webkit Debug Proxy

Setup is fairly straightforward. You will need to have iTunes installed and a compiled version of artygus’s port. You can download the latest version from Source Forge: http://sourceforge.net/projects/ios-webkit-debug-proxy-win32/files/ios-webkit-debug-proxy-win32.zip/download

Connect your device and when prompted, trust the computer from the device.trust-computer-ios-7

You will also need to enable the Safari web inspector on your device. To do this, goto Settings->Safari->Advanced and tap the web inspector switch.

Next, extract the zip file to a folder on your computer and run ios-webkit-debug-proxy.exe. A blank console window will open up. Leave this open while you want to have access to your device.

  • On your device, open the webpage/webapp you want to debug.
  • In Google chrome, go to localhost:9221.
    • From here you can see a list of connected devices to your PC. Select the localhost entry for the device you want to work with.
    • If you only have 1 device connected you can skip this step by going to localhost:9222. The first device will always go to this port.
  • Now you will see a list of inspectable pages on the device. Click the one you wish to work on
  • You will be presented with a web inspector page. If no content loads in the page and you see a grey bar at the top of the page don’t worry! In your address bar, click the grey sheild and “load unsafe scripts”.

Capture
Untitled

  • Voila, you should see a web inspector for your device!
    • From here you can test CSS properties on elements, inject some HTML for a preview and see the javascript console!

The only issue I have run into so far is I cannot view my cookies under the resources tab. Besides this minor issue, I am thoroughly impressed by this application. In traditional Windows style, it may be a bit hacky, but by god it works…. mostly.

A huge thank you to Artygus for porting the ios-webkit-debug-proxy to Windows!

You can find the github repo for the original project here, and Artygus’s port here.

Option B:  Telerik App Builder

There is an alternative to the option listed above. Telerik has developed a Windows application that provides an experience closer to Apple’s web inspector.

Telerik’s App Builder is a nicer experience, but it is only free for only 30 days. After that you will need to pay $49 a month.

I don’t want to go into too much detail about it as someone else already has written a fantastic article on the subject: http://blog.falafel.com/ios-web-inspector-on-windows-with-telerik-appbuilder/

Conclusion:

If you want to develop web apps for iOS, your best bet is to simply have a Mac. If you are in my situation where this isn’t possible, the solutions above will definitely help you out!

Happy coding!