Skip to main content

Developing an Application

 

Applies only to Mobile Apps
OutSystems

Debug Screens and Logic or View Local Storage

To debug the screens and logic or view the local storage of a mobile app you can:

Debug Using the Desktop's Browser (Recommended)

As soon as you publish your app, you can debug and troubleshoot its logic, screens and view the local storage. To do it:

  1. Open Chrome or Safari browser on the desktop.
    1. Use the latest versions of these browsers;
    2. To troubleshoot issues from a specific mobile platform, use the closest browser: Google Chrome for Android and Safari for iOS.
  2. Go to the development tools and start debugging or troubleshooting.

Debug the Mobile App Package (For Plugins)

You can also debug your installed application directly from the device. This is useful to debug and troubleshoot the plugins of your application.

When the plugin you are debugging is a supported plugin, you can use the OutSystems Now app and avoid generating a mobile application package to install it on the device.

However, this is only possible for Android apps and some features might not be available, or change slightly, as the impossibility to check the local storage. This happens because the mobile applications use SQLite to store data and not WebSQL.

In Google Chrome:

  1. Ensure you have these requirements:
    1. Your mobile device should have, at least, Android version 4.0;
    2. Chrome 32 or higher installed in the PC;
    3. The version of Chrome in the PC must be higher than the version in the device.
  2. Now you must enable the debugging on your device. In the device, go to Settings and select About;
  3. Tap seven times on top of the build number. After that, the device will display the developer settings. If it doesn't work, check how to do it in the documentation;
  4. Go to Settings->Developer Options:
    1. Slide the enable slider to “On”;
    2. Enable the “USB Debugging” option;
    3. Accept the security popups.
  5. Connect the device with USB;
  6. In the Chrome browser on the PC/Mac:
    1. Insert the URL address chrome://inspect/#devices and access it. If there are no devices listed probably you are missing the USB drivers in the device;
    2. Click on Inspect next to the device.

It is a good practice to include sensible fallbacks in the apps to avoid the app from crashing when the plugins are missing or do not work. This helps ensure that the apps can be tested using the desktop browsers. This recommendation is especially important in the case of the Safari browser, whose mobile version doesn't allow debugging.

What Code You Can Debug and How

Since the client code is running on the browser, you can use the development tools of the browser to debug it. What you can debug from your code are:

  • Client Screen Actions
  • Client Actions
  • Event Handlers
  • On Exception Handlers

The generated code at the client side follows an architecture and each file has a specific role and generated code pattern useful to understand while debugging the application.

View Local Storage Data

Using the browser (only available for Google Chrome) to debug your published mobile app allows you to view the data in the local storage.

To view the data of a local entity:

  1. Open Google Chrome;
  2. Go to the Application tab and navigate to your app’s module WebSQL / <ModuleName>.

There you find the local entities you’ve defined in the application. Just select them to view its data.

The tables for the local entities of the application are prefixed by “OSUSR_” while the OutSystems Platform tables are prefixed by “OSSYS_”. The OSSYS_ENTITY table stores internal information about each one of the application tables and the OSSYS_LOG is used to store logs locally when no network connection is available.

If you want to run your queries over the local entities, select the module name and write SQL queries in the console available.

Guidelines and Tips While Debugging Using The Browser

  • To debug a client action, hold down the CTRL key while using the application to call that action. This will automatically breakpoint in any client action that is executed.
  • To make the JavaScript code more perceivable and simple to read, click on the "Pretty Print" button available in the Sources tab:
  • To obtain more readable stack traces for asynchronous actions check the "Async" checkbox available in the Sources tab:
  • Keep a look for the errors in the Console tab. You can click on the link on the right side to navigate to the JavaScript location where the error is happening.

  • Keep a look out for errors in the Console tab

    • To navigate to the JavaScript location where the error occurs, click on the link on the right side of the log's line;

    • When the application redirects you to an error page the logs in the Console tab disappear. To preserve them, check the "Preserve log" option.

  • Was this article helpful?