Installing Weinre remote debugger on the Mac OSX Lion

Weinre, which is short for Web Inspector Remote (pronounced “winery,” “wine-ray,” “whiner,” or “weiner,” depending on your native accent or sense of humor), allows us to debug our mobile app code remotely, that is, in a desktop browser window outside the mobile device. Why would we do this? Because checking our HTML/CSS/Javascript during development in a browser doesn’t necessarily mean it’ll run flawlessly in the target mobile device. The environments are different. Also, 9 times out of 10, the device has poorly integrated debugging of its own.

How steep is the learning curve for this tool? Well, if you are habiitually using Google Chromes’s Javascript Console (in Google Chrome, click on the wrench icon > Tools > Javascript Console), then you’ll quickly grasp this tool (which is WebKit’s Web Inspector), since they are the same tools, with the addition of one extra tab in Weinre for Remote.

Currently, Weinre, developed by Patrick Mueller, only works in Webkit-based browsers like Google and Safari, as used in iPhone and Android devices. Here are the steps to download and install the software tool, and get it running on an iPod touch device running an app which uses Cordova PhoneGap. These steps are extremely thorough, designed for newbies to coding. (You’re welcome.)

(Sept. 21, 2012 update: If you use a Mac, you may want to try the iWebInspector, which is more feature-rich and designed to replace Weinre on the Mac.) Continue reading