Debugging browser quirks on your mobile device is a pain in the ass. There's no such Firebug or developer console or anything nice like their desktop counterparts.
The ability to quickly modify CSS on the fly easily saves hours of work. If only we had something like that for mobile web dev...
One could go mad debugging mobile CSS quirks...
One option is to use Firebug Lite, but to be honest, screen space is valuable and I personally would not be stuffed typing in names of CSS style properties on an on-screen keyboard.
In comes weinre to the rescue. This unfortunately named tool stands for WEb INspector REmote and is supposed to be pronounced "winery", but I always end up calling it "weener".
This gives you remote access to the content in the browser, via a another browser. It's as close as we'll get to a remote web Firebug for now.
Installation
I'm sorry to say but we'll need NodeJS for this. At time of writing I installed v0.10.18.
- Download and install NodeJS.
- Now open up the normal Windows Command Prompt (not the NodeJS one)
- Type in:
npm -g install weinre
- This installs weinre (v2.0.0-pre-HH0SN197 at time of writing)
Setup and debugging
- Once it's all done, type:
weinre --bound -all-
- Ensure that there are no firewall rules blocking this service (node.exe, allow inbound on port 8080 - such as uTorrent)
- Edit your HTML and add this script into the <head> tag
<script src="http://YourWeinreIP:8080/target/target-script-min.js"></script>
- Open up a desktop browser page to http://YourWeinreIP:8080/client
- Load your test page on the mobile device and it should appear in the client list under "Targets"
- Click on the link for the target so it turns green
- Click "Elements" in the top menu
- You should now see a familiar Chrome/Firebug style element tree and a CSS panel on the right.
- The rest (resources, network, timeline, console) should be fairly straight forward.
- Enjoy =)
