weinre - WEb INspector REmote

weinre - WEb INspector REmote

  
Hi peeps!

For the ones who don't know it already, let me introduce you weinre.

weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

Here it is in all it's glory:


Cool, but how do I use it?

weinre is implemented as a node.js package which can be installed using npm (node's package manager).
After installing a node.js runtime in your machine, open a command line and type in:

npm install -g weinre
this will install weinre globally.

Now let's start our debug server on port 8080, to do that type in the command line:

weinre --boundHost -all- --httpPort 8080
With our debug server up and running, lets open http://localhost:8080/. As you can see we have already a top bar with the same look and feel of web inspector. But we are not set yet.

Ensure that your computer and the mobile device are connected to the same network and then grab your IP address - using ipconfig / ifconfig.
It's time to set up our web page to act as a debug target by placing this script in the page you want to debug:

<script src="http://<YOUR_IP_ADDRESS>:8080/target/target-script-min.js#anonymous"></script>
Everything's set! Now...
  • on the computer:
    visit http://localhost:8080/client/
  • on the mobile device:
    visit the page you want to debug
  • on the computer again:
    Notice that a new link appeared in the Targets section;
    Click the new link to select the mobile device.
Et voilá, you're ready! Now you can use the various debugger options to debug your page in your device, remotely!
Start off with the "Elements" tab to explore the DOM and then when you're confortable explore the other tabs.

Hope that this will help you when struggling with layout or scripting in mobile devices!

Kudos to Davide Marquês, who got me into this!

more info @:
weinre
nodejs.org

Cheers,
Miguel Antunes