Debug mobile web apps using weinre

I am using weinre to debug mobile web applications. Using weinre I can inspect the DOM on my mobile Safari browser, change CSS on my iphone, and debug JavaScript.


The setup is slightly complex but once you get it up and running you will love it.

Basic steps:

  1. Install node.js
  2. Install npm
  3. npm install weinre
  4. Run weinre, the boundHost flag is your friend
  5. Open the weinre web server console on your desktop — probably http://localhost:8080 (served by weinre-node server)
  6. Copy the weinre SCRIPT tag into the source of the page that you want to debug. (i.e. to be viewed on your iPhone)
  7. Open the page that you want to debug using your iPhone (or other device)
  1. The HTML, CSS, DOM, and JavaScript are now visible on your desktop browser! You can mess with everything on the remote page as you would with the Chrome/Safari/Webkit web inspector consoles.

Use ZBar barcode reader with PhoneGap

ZBar and zxing are two iphone-compatible barcode reader libraries. I figured out how to integrate Zbar with PhoneGap for use as a QR code reader in my PhoneGap iphone application.

The process has a few major steps.

  • Download and install PhoneGap.
  • Setup a PhoneGap application in XCode
  • Download and install Zbar.
  • Follow the Zbar documentation to incorporate the SDK library into your PhoneGap

Using the Git

  • Once you download the Git repository, copy the “ZbarPlug.h” and “ZbarPlug.m” files to the “Plugins” directory in your Xcode project.
  • Copy “ZbarPlug.js” to your Project’s “www” directory.
  • Link to the js file in your “index.html” file. Be sure to put it below the include for phonegap.js
cp ZbarPlug.h /path/to/xcode/project/Plugins
cp ZbarPlug.m /path/to/xcode/project/Plugins
cp ZbarPlug.js /path/to/xcode/project/www
<script type="text/javascript" 

The example pops a javascript alert when a bar code or QR code have been decoded. Now you need to adapt the library to your project.

ZBar Barcode reader / QR code reader code for PhoneGap.

Upload photos from iPhone using PhoneGap, jQuery, and Python


Setup an HTML button to click.

<a onclick="uploadPhoto(pictureSource.PHOTOLIBRARY);">Photo Upload</a>

the click handler

// A button will call this function
function uploadPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 25, destinationType: destinationType.DATA_URL, sourceType: source, allowEdit: true });

The callback handlers.

function onPhotoDataSuccess(imageData) {
  // upload the captured photo
  $.post(‘http://path/to/ajaxUpload’, {data:imageData}, 
// Called if something bad happens.
function onFail(mesage) {
  alert(‘Failed because: ‘ + message);

the server side handler (cherrypy)

    def ajaxUpload(self, **kwargs):
        Accept miscellaneous iphone picture upload.
        import os
        import base64
  filename = "test.jpg" tmpFileName = os.path.join( "/tmp/", filename ) tmpFile = open(tmpFileName , ‘wb’) data = base64.b64decode(kwargs.get(‘data’)) tmpFile.write(data) tmpFile.close()
  cherrypy.response.headers[‘Content-Type’] = ‘text/javascript’ return "some type of return message for your AJAX if you like"

Reference Material:

Image Upload using jQuery and Python

PhoneGap Camera API

Syndicate content