CODEWITHSUNDEEP
javascriptcordovaphonegap-pluginsonsen-uiphonegap-cli
Laureant
Laureant

Reputation: 1019

Best way to debug PhoneGap app using the CLI, in a browser

I've been working with PhoneGap for a while now, and since I really had to rush into it, with no real web development experience, I might be doing a couple of things incorrectly in terms of debugging and building.

First of all, I am using the PhoneGap CLI to create my projects. I build my mobile apps using the PhoneGap Build service, where I upload a zipped version of my www folder.

To debug my apps, I use the phonegap serve command in the CLI, and then I basically just access the URL and use Chrome's Developer Tools to check my JS and HTML. I sometimes use a Chrome extension, called Ripple which usually does the job, but it seems a little buggy (other options?)

Recently, I added the PushBots plugin into one of my applications and I get reference errors in the console while debugging. How can I prevent these types of errors?

Another problem that I usually have is that I get a reference error for cordova.js or cordova_plugins.js. I understood, that the cordova javascript files are dinamically added to the project when building, but it's still annoying in the console. Any way to get around it?

I also added the Onsen UI framework on top of my PhoneGap app, and it gets a little hectic, regarding which instantiating functions to use, to handle the Android back button, for example. (I currently use the index.js from my scripts folder for that, that I've just created manually. PhoneGap didn't create it for me)

My usual folder structure looks like this: 

www
  >  css - contains CSS for the onsen framework
  >  img - contains some images that are referenced in my code
  >  js - contains jquery, moment and other libraries that I use in my app
  >  lib - 
     > angular - contains angular.js
     > onsen - contains the onsen framework
     > bootstrap
  >  res - contains icons and splash screens
  >  scripts - recently added it myself, with an index.js file
  >  config.xml
  >  index.html
  >  main.html
  >  appController.js
  >  loginController.js
  > .....

The errors with the plugins start to happen here. This is my index.js in the scripts folder which i reference in my index.html just after referencing cordova.js that I have copied to the root (www) folder, so I don't get reference errors all the time (I don't get it anymore for cordova.js, now I get it for cordova_plugins.js, so I guess this method is not good)

(function () {
"use strict";

myApp.run(['$rootScope', function($rootScope) {
    document.addEventListener('deviceready', function() {

        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        document.addEventListener("backbutton", onBackKeyDown, false);
        window.plugins.PushbotsPlugin.initialize("--------", {"android":{"sender_id":"-------"}});

        // First time registration
        // This will be called on token registration/refresh with Android and with every runtime with iOS
        window.plugins.PushbotsPlugin.on("registered", function(token){
            console.log("Registration Id:" + token);
        });

        window.plugins.PushbotsPlugin.getRegistrationId(function(token){
            alert("Registration Id:" + token);
            console.log("Registration Id:" + token);
        });

        // Should be called once app receive the notification
        window.plugins.PushbotsPlugin.on("notification:received", function(data){
            $rootScope.$emit('onNotificationWhileOpen', data);
            console.log("received:" + JSON.stringify(data));
        });

        // Should be called once the notification is clicked
        window.plugins.PushbotsPlugin.on("notification:clicked", function(data){
            //alert("clicked:" + JSON.stringify(data));
            $rootScope.$emit('onNotificationClick', data);
            console.log("clicked:" + JSON.stringify(data)); 
        });

        window.plugins.PushbotsPlugin.resetBadge();

    }, false);
}]);

...All the necessary functions for the callbacks go here...
} ) ();

The plugins are added by the PhoneGap Build framework, so I just have to specify them in the config.xml file. I guess this is why I have problems with it while debugging on the PC, but is there a way to get around this?

Did I make a total mess out of my project by adding the cordova.js reference manually? Is it needed actually, when I have the Onsen framework?

LE : Just want to make sure that I give as much info as possible. This is how I load my Javascript files into my html files: 

<script src="js/onsenui.js"></script>
<script src="js/angular/angular.js"></script>
<script src="js/angular-onsenui.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<!--CONTROLLERS-->
<script src="app.js"></script>
<script src="appController.js"></script>

<script src="helpers.js"></script>

<script src="cordova.js"></script>
<script src="scripts/index.js"></script>

Upvotes: 2

Views: 323

Answers (1)

johnborges
johnborges

Reputation: 2533

One thing I would recommend is move the reference to cordova.js further up before your code could potentially make a call to a Cordova API. Like so:

<!--CONTROLLERS-->
<script src="cordova.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/angular/angular.js"></script> 
<script src="js/angular-onsenui.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<!--CONTROLLERS-->
<script src="app.js"></script>
<script src="appController.js"></script>

<script src="helpers.js"></script>

Upvotes: 0

Related Questions