Recently I had a weird rendering problem that only happened on Chrome for iOS and needed access to developer tools (debugger, DOM inspector, etc).

I knew about Safari for Mac allowing you to debug via USB and I had read that this also worked with any app that used any UIWebView .

But for some reason it didn’t work for Chrome. So I kept looking and found 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.

The basic steps to get it working:

1. Install it via node package manager:

   sudo npm -g install weinre

2. Run it on the console:

   weinre --boundHost <IP ADDRESS OF THE WEB SERVER>

3. Link the website you want to debug to weinre by adding this to the page

   <script src="http://<IP ADDRESS OF THE WEB SERVER>:8080/target/target-script-min.js"></script>

4. Load weinre’s remote debugger on your browser at

   http://<IP ADDRESS OF THE WEB SERVER>:8080/client/

5. Reload your website.

I used<IP ADDRESS OF THE WEB SERVER> everywhere, in my case it was the local IP of my development machine.

weinre worked nicely for me, and fast too. Can’t complain.

Now about the name:

weinre is WEb INspector REmote. Pronounced like the word “winery”. Or maybe like the word “weiner”. Who knows, really.

Yeah… naming things is hard.