If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Debugging your app

Debugging your app is a big part of any development, using any tools and Appery.io is no different. If something doesn’t work, read this page to learn how to debug various parts of your app.

Remember that your app runs in the browser (or on the device), not in Appery.io. It’s a good idea to reread these frequently asked questions and answers.

REST API service

Use the following steps to debug a REST API service.

  1. Invoke the REST API service from a command link (curl) to ensure it works properly. If the service doesn’t work from the command link, you need to contact the service vendor. Alternatively, you can test the API service via Chrome Postman plugin or a service such as hurl.it.
  2. Debugging the service inside the App Builder:
    • Test the service inside the App Builder with default values (service editor > Test tab)
    • Add and invoke the service from the page but also with just the default values.
    • If above two tests work, try adding in mapping.
  3. Chrome, Firefox and Safari provide built-in tools to debug a API request.
    • When you test the API, you can see the service request/response information.
    • The Preview and Response tabs will usually display the service error.
  4. When you’re calling a service, unsupported cross-domain calls are a very common service invocation error. If that’s the case, try running the service with the Appery.io proxy on. If you defined and tested a service, but no data is displayed on the page, recheck this. This is most likely a cross-domain issue.
  5. If you have custom JavaScript in mapping, remove the mapping and invoke the service with default values. Then use console.log(..) statements to debug custom mapping code to ensure the service gets the correct values.
  6. Check the browser console for any JavaScript errors (click F12).
  7. If your service worked, and has now stopped:
    • A service might stop working if there is a JavaScript error prior to its invocation. If the service is invoked (you can check it in the Network tab), check what response you get.
    • If you are mapping data from the browser’s local storage, do a simple alert(..) on the values to make sure they are set correctly, or use the browser’s debug tools below to see the local storage values.
  8. To debug the service when running the app on the device, use Weinre remote debugger.

Native API (Cordova)

Debugging native APIs

  1. If you are testing a native API or feature, it needs to be tested on the device. You can install the app, or use the Appery.io Tester. Only Geolocation can be tested in-browser.
  2. You can use Weinre debugger to do remote debugging when the app is running on your device.
  3. Ensure that Cordova library has started succesfuly. Use the Weinre debugger console to check if there are any errors when the app launches.

JavaScript

Any custom JavaScript you’ve written is usually outside the scope of our support, but we’ll be happy to try and help you.

  1. Please try debugging the script first. You can use the browser’s built-in debugger (Chrome Dev. Tools/Firebug) or even use console.log(..) to see where the script fails. Learn more about Chrome developer tools here.

API Express

This sections shows a number of ways to debug API Express project and APIs.

  • When creating or editing a database connection, test to ensure the connect works.
  • Once you generated an API, make sure it works by testing it.
  • When creating a database connection or testing an API, it might also help looking at the browser’s developer tools to see if there are any errors.
  • Ensure that API Express is able to connect to your database. This page shows how to do that.
  • When trying to generate REST APIs but the wizard is not showing any tables, make sure you have connected to the right database. Some server instances might have two more database so make sure you select the right one.

Building for Android

Most common problems when building for Android.

Building for iOS

Most common problems when building for iOS.

Server Code

This section shows how to debug a Server Code script.

  • When a script fails to execute errors will be added to the Trace tab.
  • Use console.log(...) for debugging. For example, place console.log() after each statement and display variable information. This way you can see where the script stops executing.

Push Notifications

This section shows how to troubleshoot Push Notifications.

Android

Troubleshooting for Android

  • Make sure that you use correct Sender ID and that it was entered without any spaces.
  • Check the validity of an API key that is set for your app, you can use this curl command: https://developers.google.com/cloud-messaging/http#checkAPIkey. If does not help try to recreate API key in Google developer console for your app and re-set it in your Push Settings. Build the app again and re-install it on the device.

iOS

Troubleshooting for iOS

  • Inside the Provisioning Portal – make sure that you have enabled the Push Notification service in the AppID configuration page.
    iospush_enabled

    Enabling Push Notifications for iOS app

  • Check if your test devices UDID are added into your provisioning profile which is linked with your Push Notifications certificate file (this section is available under Devices on the left-hand side):
    iospush_udid

    iOS device registration

  • Make sure that you using valid/active certificate in your app Push Notifications Settings
    • If your you app is in development – you are using a Development Certificate then you need to create a Development Certificate for Push Notifications and the same thing for Production.
  • When you enable push in an app and run it for the first time on a device, push registration will happen automatically. The device will be registered in the Devices collection in the database. If for some reason you don’t see the device registration, you can try to manually register the device by using this curl command:
    • X-Appery-App-ID – is your app ID
    • You can define any “type”, “token” and “deviceID” values
  • To debug Push Notifications events it also useful to create push events in your app to see whether push is initialized, and your device is registered. This example will show you how to use push events and display registration information.
  • Make sure you are using the correct library version for push events. Library version 3.0 or higher has new JavaScript API. More information here.
  • If you are using TestFlight to distribute builds.
    TestFlight builds act similar to production builds, and they do not work with development push certificates. You need to create an App Store Distribution profile and Production Push Cert in the Apple Developer Portal for TestFlight AND you must upload them to App Settings > iOS binary and Apple Production Push certificate to the App Push Settings tab in Appery.io.

Using browser debug tools

Your Appery.io app is just an HTML5, jQuery Mobile, JavaScript and CSS app that runs in-browser (or a PhoneGap app). The best way to debug such an app is to use the available browsers tools: Chrome Developer Tools (Wrench tool > Tools > Developer Tools) or Firefox’s Firebug plugin. These plugins allow you to inspect:

  • DOM elements.
  • Request/response information.
  • Any JavaScript errors or warnings.
  • Browsers’ local storage.
  • And much more.

We use these tools daily, and we recommend that you use them as well. Developers building mobile apps via other means use the same debugging tools. Here are a few examples (using Chrome Developer Tools):

Check console for JS errors

Loading the first app page produces a blank screen:

Opening the Console tab shows a JavaScript error.

Trying to invoke a service and getting a cross-domain security error:

Selection_170

Checking service invocation

Viewing the request header information:

Selection_173

Viewing the browser’s local storage

Viewing the local storage content:

Selection_171

Inspecting the browser DOM

Inspecting the DOM elements to view the app-generated code:

Selection_172

Remote debugging with Weinre

The Weinre debugging feature allows you to debug the app while testing in-browser or on the device.

To enable Weinre debugging, open App settings, and check the “Enable Weinre debugging” box.

debug001-Weinre

A debugging URL appears: when testing the app, you can open this link, or click “Launch in debugger”.

Before debugging with Weinre, open the app Preview in browser (click “Test”) or on device (scan QR code), or install the app binary file on device.

You’ll see all the target devices and client browsers connected to the debugger. If you’re running multiple application instances, multiple targets are shown (active target is highlighted with green). Select the device you’re going to debug:

debug004

Open Elements view to inspect the DOM elements. You can edit attributes, styles and properties. The actual component layout is instantly highlighted in the running app:

debug005

In Resources view, you can see local storage and session storage variables.

The Network inspector allows you to see all network requests (except JSONP requests):

debug006

In Console view, you can run JavaScript, and it will execute in your app:

debug007

Clearing browser cache

Browsers love to cache files which sometimes leads to things not working as expected (when a new version of a file doesn’t get loaded). It’s always a good idea to clear the browser cache (from the browser menu).

If you are using the Chrome browser, here is another (and usually better) way to clear the cache:

  1. Enter : chrome://appcache-internals/ in the address bar
  2. Find the entry that looks like this: Manifest: https://appery.io/….
  3. Click Remove
  4. Reload the app or the app builder

If project does not get loaded in Chrome browser try these steps:

  1. Open browser debugger (F12)
  2. Go to Network tab
  3. Click “Disable cache” check box: DisableCheckbox
  4. Clear cache
  5. Reload app builder
  6. If project loads correctly then you can uncheck this option

Please remember that disabling cache makes things run a little bit slower.

Checking the JSON/XML response

http://jsonlint.com (or http://www.xmlvalidation.com/) – to check if your JSON response has a valid format.

Browser support for specific features

http://caniuse.com/ – compatibility tables for HTML5, CSS3, SVG, etc., support in desktop and mobile browsers.