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.
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
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”.
- Voila, you should see a web inspector for your device!
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!
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/
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!