HTML5 Zone is brought to you in partnership with:

Andrew Trice is a Technical Evangelist with Adobe Systems. Andrew brings to the table over a decade of experience designing, implementing, and delivering rich applications for the web, desktop, and mobile devices. Andrew is an experienced architect, team leader, accomplished speaker, and published author, specializing in immersive experiences, mobile development, realtime data systems, and data visualization. Andrew is a DZone MVB and is not an employee of DZone and has posted 53 posts at DZone. You can read more from them at their website. View Full User Profile

Tricks for Debugging PhoneGap Applications in Desktop Browsers

03.05.2012
| 6606 views |
  • submit to reddit

I often encourage people to develop as much as possible in desktop browsers when they are building PhoneGap applications.  While there are remote debugging tools such as weinre for remote debugging on devices, the developer experience is still better inside of a desktop browser because it gives you breakpoints and memory inspection capabilities.  In most cases, you can develop the vast majority of your application within the desktop browser, and switch to a physical device when integrating with PhoneGap APIs or for performance testing. Personally, I use Chrome, and take advantage of the Chrome Developer Tools.

However, when developing from the local file system, you will run into a few roadblocks with desktop browsers.  A big issue is the browser security model.  If you try to asynchronusly request files when the application is loaded from the local file system, you’ll like get an error like:

XMLHttpRequest cannot load (filename or url). Origin null is not allowed by Access-Control-Allow-Origin.

Luckily, there are a few tricks you can use to get around this… local HTTP servers and relaxing the browser’s security.  Note: I’m on a Mac, and I don’t know the syntax for these on Windows.

Local HTTP Server

The first option is to use a local web server to host files.   You can fire up a simple HTTP server from any directory in OSX by opening a terminal and using the following command:

python -m SimpleHTTPServer 8000

An HTTP server will start, and you’ll be able to access any content from that directory and child directories from the URL http://localhost:8000/  Thanks to @mesh for this trick.

However, this will only work for static content that is within your directory structure.   If you need dynamic content, you’ll need some sort of application server infrastructure.

Relaxed Browser Security

OK, that’s great, but it doesn’t cover every situation.   What if you don’t want a local application server configuration?  What if you want to develop against services that are remote, and you don’t control them?    Well, you are in luck.

You can disable security restrictions in Chrome to allow you to access these services.   The following command will allow unrestricted access from the file system, and will also allow cross-site requests.   Kill Chrome, then relaunch from a terminal window with the following flags:

open -a /Applications/Google\ Chrome.app –args –allow-file-access-from-files –disable-web-security

Using this configuration, you’ll be able to open an HTML file from the local file system, and that file will be able to make requests to other sites to access data or other resources.

In the screenshot below, you can see that I launched my Census Browser application from the local file system, and it can access services from http://www.tricedesigns.com.   With the default browser security policy, this would not be possible.

Local Application Debugging With Remote Services

WARNING: ONLY USE THIS FOR DEBUGGING!

Do not use this configuration for normal web browsing because it will leave your browser security wide open, and able to be exploited and compromised.  Do not browse the web when you’ve relaxed the security policy.

Thanks to fellow Adobe evangelist Piotr Walczyszyn for introducing me to this trick.

 

Published at DZone with permission of Andrew Trice, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Paul Shezier replied on Fri, 2012/04/13 - 2:40pm

The other thing that really helps with desktop debugging is an emulator/simulator of the PhoneGap API.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.