Skip to Content

Debugging PhoneGap Applications with weinre

Those who have been following my recent whereabouts know that I’ve been looking into turning a SAP UI5 mockup project created with the upcoming AppDesigner into a working application by connecting it to the SAP Mobile Platform – Cloud Edition (for more details please refer to Jens Koerner ‘s recent blog.) 

In a nutshell, the process looks like this:

  1. You take the HTML5 + JS + CSS code generated by the AppDesigner and plug it into a PhoneGap project.
  2. Then you simply replace the endpoint to the Odata service and then compile the app.
  3. There’s no step 3. You’re done!


So, while I was going through this endeavor from end-to-end I faced some connectivity issues when running this scenario within the iOS simulator. The code was running perfectly fine in my local browser, but I simple didn’t get any result back from within my PhoneGap project. My first thought was that it may be a CORS issue as I was calling external services via Odata (and not via JSON-P.) From what I’ve been told CORS should not be a problem for mobile web apps, but I still wanted to pin-down the problem, hence I did a quick search and found the PhoneGap Domain Whitelist Guide, which explained the necessary information on how-to fix this. Still no luck though….

So, I continued my investigation and tried out a simple AJAX call against an external service, which worked fine. So, in general making external calls was working. At this point in time I was thinking: “if only I would have my beloved web inscpector tools known from webkit, so I could check the network traffic!?!


Enter: weinre!

Now, for those of you who don’t know about weinre yet:

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.”

In a nutshell, it’s a tool that gives you the same interface as the web inspector, but for external apps. So, just what I needed!

I found a great document explaining the installation process on the web: Installing Weinre on Mac OS X

Just today, I realized I should have checked on SCN first as some people have already blogged about the tool (shame on me!):

How to install and run Weinre by Tobias Hofmann

Debugging SUP/SMP Hybrid Web Container Workflows with WEINRE by Mohamed Ait Ahmed Ouali

Oh well, as such I spare you the details of getting it up and running and instead fast-forward to the results. It works like a charm and it’s really easy to use! All you need to do us to fire up the server on your PC and add the following Javascript to your source code:

<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

Now, you can use the monitor page on the local server to debug the application as if it would be running locally! Have a look:


Pretty cool, isn’t it? Surely helped us to identify the cause of the problem with our Odata model!

PS: Oh… and another benefit of installing weinre is that you also install node.js during the process in case you’re interested in trying it out! 😉

Be the first to leave a comment
You must be Logged on to comment or reply to a post.