There are a few tips that can streamline your troubleshooting process while using Chrome Developer Tools. Check the Troubleshooting Tips section below for more information.
Debugging on the Desktop Browser
You can troubleshoot mobile app issues in your Chrome desktop browser if you're not using native plugins or if all native plugins have fallbacks in place that allow your mobile app to work properly outside a real mobile device.
What Can I Debug?
Since the client code is running on the browser, you can use the development tools of the browser to debug it. You can debug:
- Client Screen Actions;
- Client Actions;
- Event Handlers;
- On Exception Handlers.
Starting a Debug Session
You can debug and troubleshoot your mobile app as soon as you publish it, troubleshooting its logic, screens and viewing the local storage. To do it:
- Open the Chrome browser on the desktop (use the latest version);
- Open Chrome Developer Tools (e.g. by pressing F12) and start debugging or troubleshooting.
To debug a client action you can hold down the CTRL key while using the application to trigger that action; this will automatically breakpoint in any client action that is executed. Check below for other useful tips while using Chrome Developer Tools.
Viewing Local Storage Data
You can view data in the local storage while troubleshooting your app in the desktop Chrome browser.
To view the data of a local entity:
- While previewing your mobile app in the (desktop) Chrome browser, open Chrome Developer Tools (e.g. by pressing F12);
- Go to the Application tab and navigate to your app’s module WebSQL / <YourModuleName>;
- Expand this tree node to show a list local entities defined in the application;
- Select one to view its data.
The tables for the local entities of the application are prefixed by
OSUSR_, while OutSystems tables are prefixed by
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.
To run queries over local entities:
- Select <YourModuleName> in the tree on the left;
- Write your SQL queries in the console available on the right.
Debugging on Your Device Connected to the Desktop Browser
You can debug your mobile app while running it on a mobile device, either through OutSystems Now or by installing it previously through an application package. This is useful to debug and troubleshoot plugin behavior in your mobile app.
Mobile device debugging is currently only possible for Android apps.
Connecting the Desktop Browser to Your Device
- Your mobile device has Android version 4.0 or upper;
- You have Google Chrome version 32 or higher installed in the PC;
- The desktop Chrome version is higher than the Chrome version in the mobile device.
- If the mobile app was installed in the mobile device through an application package, it must have been generated with a
To enable debugging on your device:
- Open Settings and find the option Developer Options.
Note: If you don’t see this option listed, take the following steps:
- 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 option. If this doesn't work, check how to do it in the documentation;
- Select the Settings > Developer Options;
- Slide the enable slider to
- Enable the
- Accept the security popups.
To connect your device to the desktop Chrome browser:
- Connect the device to your PC through USB;
- If there an option in the device to set the USB mode, make sure it’s set to
- Open the desktop Chrome browser and navigate to the following URL:
Note: If there are no devices listed, you are probably missing the USB drivers on your computer.
- Click on the inspect link next to the URL of the WebView.
You can now inspect and debug the contents of the WebView displaying your app in the device.
If your mobile app uses only supported plugins that are included with OutSystems Now, you can connect the desktop browser to your device by following the steps outlined above and troubleshoot it through the OutSystems Now mobile app. This way you will avoid having to install your mobile app through an application package.
You can find below a series of tips that may improve your troubleshooting steps:
- 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;
When the application redirects you to an error page the logs in the Console tab disappear. To preserve them, check the Preserve log option;
Use the Performance tab in Chrome’s Developer Tools for doing performance troubleshooting. If you detect long wait times without any CPU or network usage, this means that your app is probably waiting for data (aggregate or data action results) or waiting for a native plugin operation to complete;
To simulate poor network conditions you can you the throttling feature available in the Network tab. Be aware that you might get unexpected results when using throttling in Chrome and testing with a real device connected to the browser.
Alternatively, you can test your mobile app on a device with its mobile network settings configured for 2G mode only.