Debug mobile web apps using weinre

I am using weinre to debug mobile web applications. Using weinre I can inspect the DOM on my mobile Safari browser, change CSS on my iphone, and debug JavaScript.

The setup is slightly complex but once you get it up and running you will love it.

Basic steps:

  1. Install node.js
  2. Install npm
  3. npm install weinre
  4. Run weinre, the boundHost flag is your friend
  5. Open the weinre web server console on your desktop — probably http://localhost:8080 (served by weinre-node server)
  6. Copy the weinre SCRIPT tag into the source of the page that you want to debug. (i.e. to be viewed on your iPhone)
  7. Open the page that you want to debug using your iPhone (or other device)
  1. The HTML, CSS, DOM, and JavaScript are now visible on your desktop browser! You can mess with everything on the remote page as you would with the Chrome/Safari/Webkit web inspector consoles.