Posts Tagged phonegap
Weinre (WEb INspector REmote) is a debugger for webpages that is designed to work remotely. This is especially helpful for debugging web pages that are running on mobile devices.
We are going to need several things to get weinre up and running. First we are going to install node.js, which will host the weinre webserver; next, we will install the node package manager (npm); then, finally we will install weinre.
The easiest way to get node.js is to go to nodejs.org and download the windows installer (This has the added benefit of automatically installing npm. However, I preferred to skip the installer and get just the latest executable from the download site here: node.exe.
If you used the installer to get node.js, npm is already in node.js’s installation directory. Otherwise, head over to http://npmjs.org/dist/ and grab the most recent version (npm-1.1.44.zip) at time of writing. After downloading the file, unzip it to the same directory that contains the node.js executable.
Next, open a command prompt and navigate to the directory that holds the node and npm executables. At this point, you have two options, you can use the weinre binary thats deployed on npmjs.org by issuing:
npm install weinre
Or you can provide a full url. Since, at time of writing, there are no official builds for weinre on the Apache mirrors, I would recommend just using the npmjs binaries as their location will not change as the transition to the incubator project continues. If you do want to specify a full url for installing weinre, you can get the up-to-date binary package locations from here.
Now that weinre is installed, you can run it by opening a command window to your node.js executable directory and running:
node.exe node_modules\weinre\weinre --boundHost -all-
This will start a new weinre instance at http://localhost:8080, and it will listen on all your computers interfaces, which will allow remote clients (the mobile device) to connect to the server.
If a Windows firewall dialog pops up, you should grant access to node.js. Once weinre starts up, it should display a message such as:
2012-07-20T00:39:40.998Z weinre: starting server at http://localhost:8080
In the console.
Enabling weinre on the mobile device
After weinre starts, navigate to http://localhost:8080 in a WebKit-based browser (Such as Google Chrome). You will be presented with a dashboard showing access points and target scripts.
One gotcha is if you go to http://localhost:8080, the target script is going to display a localhost IP for the script file. This won’t work if we are debugging on a mobile device – we need to use the IP of the computer’s interface that connects it to the network. This can be determined by running the ipconfig command in a console.
C:\Users\Dustin>ipconfig ------------ Windows IP Configuration Ethernet adapter Local Area Connection 2: Media State . . . . . . . . . . . : Media disconnected Connection-specific DNS Suffix . : Ethernet adapter Local Area Connection: Connection-specific DNS Suffix . : Link-local IPv6 Address . . . . . : fe80::20cf:d407:7d2b:f8eb%10 IPv4 Address. . . . . . . . . . . : 192.168.1.24 Subnet Mask . . . . . . . . . . . : 255.255.255.0 Default Gateway . . . . . . . . . : 192.168.1.1
By navigating to my IPv4 address (http://192.168.1.24:8080), I can be sure that the mobile devices on my network will be able to access the weinre server.
To enable the mobile device to connect to the weinre server, you must add the target script to the code of the webpage. I’m developing using PhoneGap, so I simply pasted the target script into the header of my index.html file, and rebuilt my application.
Debugging with weinre
After building and deploying the updated app to my device, I simply run it on the device, and navigate to the client access point (eg: http://192.168.1.24:8080/client/#anonymous). Notice the url fragment anonymous. This must match on both the target script and on the client access point, as it provides a way to have multiple debug sessions, and to keep others from discovering your debug sessions if they are on the same network. More information can be found on the MultiUser page of the weinre site.
Debugging in Blackberry Webworks
Webworks doesn’t like the local weinre server – it’s expecting a publicly routable address. You can either open the appropriate ports on your router to let external devices access your winre instance, or you can use the public phonegap instance at debug.phonegap.com.
I’ve been looking at using Phonegap and Dojo for rapid application development on mobile devices. As I have been doing blackberry development for the past year or so I thought that this would be a good platform to start on. However, I almost immediately ran into a problem with the WebWorks packager.
The problem is that the packager will not permit paths with special characters in them – special characters including the somewhat limiting “_” and “-“. Instead of packaging the files it would return the error Invalid widget archive – resource name is not valid This is especially a problem with dojo and it commonly uses these conventions for stylesheets and js files.
After Googling, I found that this behaviour was by design. It seems that if you pass a file with a dash in it, the RAPC compiler thinks that it is a command line switch.
Fortunately, RIM has recently open sourced the Webworks API. I knew from my experience with bb-ant-tools that you were able to pass a file containing paths to the files to include in the package, thus circumventing the problem with the command line switches.
The packager now successfully packages _bad-path.txt.
To patch your webworks packager, download WebWorksPatched extract it and move the bbwp.jar to your webworks bin folder (Usually C:\Program Files\BlackBerry WebWorks Plug-in Eclipse\plugins\net.rim.browser.tools.wcpc_22.214.171.124010291444-22\wcpc\bin).
For the brave of heart, source code is available on GitHub at https://github.com/51systems/WebWorks