Debugging PhoneGap/Cordova apps on the Desktop

If you’ve tried building PhoneGap/Cordova apps, be it in Object Pascal via Smart Mobile Studio or directly in JS, you’ll quickly have realized that debugging on the devices, even with remote debuggers and emulators, isn’t always convenient.

Being able to debug in a desktop browser would be so much more convenient, eh?

The most commonly recommended way to do that is via Ripple, a Chrome plugin, which is indeed pretty, but IME proved quite buggy and heavy (meaning that Chrome debuggers would spend more time reporting stuff buried deep in ripple.js than in my own code).

Enter phonegap-desktop, an open source project by Jonathan Prince, which is essentially just a phonegap.js library that exposes the PhoneGap API, and allows you to provide fake device data just by writing in a json file. Simple, no-fuss.

To use it with a SmartMS project, just copy the “phonegap-desktop.js” file in the bin subfolder of a project, rename it to “phonegap.js“, et voilà! you can then run your app in Chrome or FireFox as usual. And when building the zip for Phonegap Build, just don’t include that file.

3 thoughts on “Debugging PhoneGap/Cordova apps on the Desktop

  1. Very nice tip.
    Thanks for pointing this project out!

    What about debugging right inside the Smart IDE?
    AFAIK there was some preliminary of implementing an object-pascal level debugging within the IDE (hiding javascript just as the Delphi IDE is hiding assembler).
    This would be a genuine feature to add to Smart.

  2. @A. Bouchez
    I can’t tell about the timeline for integration, but I’m going to push for source-maps getting in ASAP. They’re already in “works here” state (just in need for wider testing), and allow to debug Pascal code right from any source-map capable browser (Chrome & FireFox at least).
    http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
    When compiling for source-maps, the compiler will generate modified sources, so you can actually see the actual JavaScript names right in the Pascal source (and so use hints evaluation, edit the variables, add watches…).

    There was also some prototype for attaching to the Webkit remote debugging in the IDE, I’m not sure how far that has advanced though.

Comments are closed.