Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Using Browser Dev. Tools

Using browser debug tools

Your Appery.io app is only an HTML5, jQuery Mobile, JavaScript, and CSS app that runs in a browser (or a PhoneGap app). The best way to debug 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.
  • Browser's 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).

Chrome Dev. Tools.

Chrome Dev. Tools.

Check Console for JavaScript Errors

Your app might not work property due to a JavaScript error. Using the Console you can view any errors or warnings produced while loading or running the app:

JavaScript error.

JavaScript error.

Checking Service Invocation

The Network tab will show service invocation information such service headers, response and more. Use this to check that the service is invoked with correct parameters.

Inspecting service invocation.

Inspecting service invocation.

Once a request is selected, you can view its response:

Service response.

Service response.

Viewing Browser Local Storage

Browser local storage plays an important role in many apps. You can quickly view its content as shown below. For example, if your app saves a value into the storage, you can check to make sure that the correct value is saved. Note that local storage shown will be different for each domain. Browser local storage is a standard browser API supported by modern browsers.

Viewing local storage.

Viewing local storage.

Visit this page to learn more.

Inspecting the Browser DOM

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

Inspecting generated app code.

Inspecting generated app code.

Use the inspect function to see the exact code which runs in the browser.

Clearing Browser Cache

Browsers love to cache files which sometimes leads to things not working as expected, such as when a new version of a file doesn’t load. 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 the project does not load in the Chrome browser try these steps:

  1. Open browser debugger (F12)
  2. Go to the Network tab
  3. Click Disable cache checkbox:
  1. Clear the cache.
  2. Reload app builder.
  3. If project loads correctly then you can uncheck this option.

Tip

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

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

JavaScript and CSS Debugging Tips and Tricks

Read more here: https://css-tricks.com/debugging-tips-tricks/

Using Browser Dev. Tools


Using browser debug tools

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.