Live debugging with weinre and webkit


If you're envious of the chrome for android remote debugger when using chrome on the desktop when designing and debugging the default android browser you're in luck.

A project called weinre enables you to debug html, css and javascript in mobile browsers as long as it's on the same network. Also it restores the web inspector to pc's aswell since apple made web inspector debugging mac only and even removed it as an option on the ipad as part of the developer section, so now you have to own a mac to even debug mobile safari. Installation is pretty straight forward but the easiest way is to install via. node.js .
Simply type sudo npm -g install weinre in your command prompt and when done doing it's thing you can now debug via the webinspector in chrome / safari (sorry webkit only apparently). You call you weinre installation e.g. http://20.0.0.1:8888 and start checking for input. Nothings going to show up yet untill you import
<script src="http://20.0.0.1:8888/target/target-script-min.js"></script> into the html file you wan't to debug, refresh the weinre page and your page should popup and to inspect the dom, css and javascript.
You can event push javascript through the console to do even further testing. If you spot multiple targets in the device list, just go for the one with the highest id and click it so