To debug the screens and logic or view the local storage of a mobile app you can:
- Debug the mobile app using the desktop's browser and its development tools: the easiest and most recommended option to debug and troubleshoot the logic, screens and view the local storage of the application since it doesn't require the application to be installed on the device, you only need to publish it. If you want to test the plugins used in the application, check the other debug option or, if it is a supported plugin, you can use OutSystems Now;
- Open the mobile app on the device and connect it to the desktop's browser: to debug the plugins used by the application. If you haven't, you must generate the mobile application package and install it on the device.
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:
- Open Chrome or Safari browser on the desktop.
- Use the latest versions of these browsers;
- To troubleshoot issues from a specific mobile platform, use the closest browser: Google Chrome for Android and Safari for iOS.
- 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.
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:
- Ensure you have these requirements:
- Your mobile device should have, at least, Android version 4.0;
- Chrome 32 or higher installed in the PC;
- The version of Chrome in the PC must be higher than the version in the device.
- Now you must enable the debugging on your device. In the device, go to Settings and select About;
- 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;
- Go to Settings->Developer Options:
- Slide the enable slider to “On”;
- Enable the “USB Debugging” option;
- Accept the security popups.
- Connect the device with USB;
- In the Chrome browser on the PC/Mac:
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:
- Open Google Chrome;
- 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 OutSystems 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 obtain more readable stack traces for asynchronous actions check the "Async" checkbox available in the Sources tab:
Keep a look out for errors in the Console tab
When the application redirects you to an error page the logs in the Console tab disappear. To preserve them, check the "Preserve log" option.