Debugging HTML5 running in iOS from Windows with Chrome dev tools!

In order to debug HTML5 running in Safari on iOS, I used to connect the iOS device to my Mac, open Safari, go to Developer menu(needs to be activated from Safari Preferences) and open the page.
You can find detailed steps how to do this on internet.

I tried to remote debug HTML5 with other tools (Telerik has one), but the best way is with an utility called ios-webkit-debug-proxy which uses Chrome dev tools!

You can find it here https://github.com/google/ios-webkit-debug-proxy and its Windows port: https://github.com/artygus/ios-webkit-debug-proxy-win32

It allows you inspect the WebKit (either the Safari or UIWebViews) running on the iOS device from your Windows machine with Chrome dev tools.
This utility connects to the WebKit for inspection.

Steps (most of these are written in https://github.com/google/ios-webkit-debug-proxy):

1. Go to https://github.com/artygus/ios-webkit-debug-proxy-win32
2. You can either get the compiled version or build from the source. I chose to built it from source just for the kicks.
3. Run the ios-webkit-debug-proxy.exe
4. In Chrome, go to http://localhost:9222/ to see web-browser tabs open in Safari or the WebViews on the iOS device. Click on a tab.
5. A new window should open with Dev tools. Note the silver icon, click on it and choose to 'Load unsafe scripts':

Some things to keep in mind:

- note that a web server is being used. when inspecting a tab, the link is
  https://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html?host=localhost:9222&page=1
  not sure if this might be a security issue for what you're debugging.

- in the inspector window, clicking on elements in the Elements tab doesn't do anything; you can use arrow keys to navigate up and down in the DOM tree