Posts with tag: Safari

Today I found out that you don't need a Mac if you want to debug a quirky looking web site on a iOS device.. something I did not think was possible..
But as it turns out this can quite easily be done using a windows 10 machine, a USB cable and an iOS device.

Here are the steps to do it.

Start out by getting these prerequisites: 

  • Install Itunes on your windows 10 Machine (there are drivers that come with it that we want) link.
  • Install Firefox link
  • Download iOS WebKit Debug Proxy Win32 but don't do anything with it yet. Make sure to take the x64 version if you have an x64 OS installed.
  • Have USB cable for you iOS device.

Once you have those things ready, enable debug mode in Safari on your iOS device by going to Settings > Safari > Advanced > Enable: Web Inspector.

SmallImage

Now connect you iOS device using a USB cable and make sure it comes up in ITunes, don't connect it through any type of USB hub (it refused to work through a HUB for me, and searching revealed several others had the same issue). 

Now unzip the iOS WebKit Debug Proxy Win32 into a folder of your choosing and run the .exe file. You might need to go through and unblock ALL the DLL files for it to work properly (open up their properties and click UNBLOCK, before I did this the console app just opened and closed with no error).

SmallImage

When you run the program you should see a console window with the following text. If you get errors here, make sure the device is connected and visible in Itunes and that it is unlocked. You might also want to try the x64 version if you are running the x86 version of the Webkit debug program. If that dosen't work, try disabling your firewall and see if that fixes it.

BigImage

Once you have the console app working, open up Safari on the iOS device and start Firefox. Press Shift + F8 to open up the firefox WebIDE. It should look something like this, you might want to open the Console as well as it might provide som insight into possible errors when connecting (Ctrl + Shift + K with the main firefox window active):

SmallImage

Now you might assume that you should press the Safari Firefox and others button in the WebIDE, and you can try. For me this just threw a bunch of annoying errors in the console. What you should press is Chrome Desktop, which oddly enough just worked right away.

There are a lot of people complaining about this not working here: https://github.com/mozilla/valence/issues/199 but as far as I can tell, as long as you press the Chrome button and not the Safari button it works.

The way this works is that you browse on the device as normal and in the Firefox WebIDE you can inspect the DOM and debug the scripts. When selecting a DOM element it is actually highlighted on the device too and updates and changes you make are reflected on the device as well. The network traffic itself seems to be unavailable though. 

SmallImageSmallImage