#Tools #JavaScript #Debugging #Weinre

Weinre is a great remote web debugging tool. It allows to you to quickly setup a ‘chrome dev tools’-like interface for any of your app. It comes in really handy when debugging an app on a device that does not have advanced debugging tools, think mobile, smart TVs, wearables and so on ..

Weinre is free, open source and runs on Node.

Why use weinre

Weinre is really useful when:

  • You need to have access to the DOM on a remote device and do some CSS tweaks
  • You want to access the JS log output
  • You want to check the network connections and what is going through the network
  • You want all of that in a tool that runs on Node.

Weinre won’t be of any help when:

  • You want to debug a device that is not in the same local network as yours. Check out JSConsole.
  • You can’t modify your app’s code

How to get started

Here is a straight to the point guide on how to get started.

Step 1: Install weinre

Easy with npm

$ npm -g install weinre

Step 2: Start the weinre server

The weinre server will inject some JavaScript in your app through a script to allow the debugging to happen.

Technically, using weinre is enough to start the server but here are 2 useful options that you might as well pick up straight away:

$ weinre --boundHost 192.168.123.1 --httpPort 8888
  • --boundHost defaults to localhost -> use your own IP instead. Localhost won’t mean [your machine] anymore when you are on your remote device.
  • --httpPort defaults to 8080 which is also commonly used so save yourself some issues down the line and change it to something else.

Step 3: Insert the script in your app

In the <head> of your code, add the weinre script tag:

<script src="http://192.168.123.1:8888/target/target-script-min.js"></script>

(Replace the IP with your machine’s IP and the port with whatever port you are using)

Reload or launch your app on the device under test (or simply in your browser).

Step 4: Start debugging

  • Open a browser (Chrome or Safari are supported) and go to: http://192.168.123.1:8888 or the equivalent for your IP and Port.
  • Click on the first link: Access points > debug client user interface. (Something like http://192.168.123.1:8888/client/#anonymous)
  • Your device should appear under Targets. Click on the corresponding link and you are ready to go.

The debugging tools are quite similar to browser’s dev tools so I am sure you can take it from there :)

Conclusion

Give it a try and see if it fits your needs. Weinre is an excellent tool, I have used it a lot, keep it in mind and you will soon find tons of real life situations where this is useful.

Check out the docs for more info.

#Tools #JavaScript #Debugging #Weinre