Hi everyone. You may have already noticed, but we have had to remove the debugging tool from the Community Edition. Since our transition into SAP, we have stricter process guidelines to follow, and unfortunately the current debugger was not compliant with these standards.
We are planning to re-release the debugger at a later time when it is fully process compliant, but we cannot yet give a timeline for this feature. Apologies for any inconvenience this might cause.
As an alternative, we have compiled this guide from @Mevi on how to debug using your browser’s developer console. Please let us know if you encounter issues.
Guide to debugging
- Browser developer console
- Debug log flow function
- ENCODE_JSON formula
- Mobile device debugging
Browser developer console
Debugging is easiest to do on a computer in the browser using the browser’s native developer tools. One way to access the browser’s developer tools is to right click in the app as you are previewing it and selecting Inspect. This will open developer tools to the Elements section, but what you will be mostly using are the Console and Network sections.
In the Console tab, you will see all the console logs of your application. Some of these come natively from our runtime, but you can make your own logs by either using the Debug log flow function or
console.log();in a custom JavaScript flow function. Depending on the selected log type, they will appear in assorted colors.Some errors that appear in the Console section are nothing to worry about. You can tell which ones to ignore by checking what the logs look like when the app is working great or in a new application.
In the Network tab, you can see all the requests your app is making. While you are in Preview, there will be a lot of requests as it seeks to keep itself up to date with changes from the platform side. Use the Network tab when you are having problems with the data you are fetching to see what sort of request the app sent and what response it received.
Debug Log flow function
The easiest way to make relevant logs to the Console tab is by using the Debug Log function. You can document each step your logic takes and states of variables in the log’s message using direct bindings or formulas.
ENCODE_JSON formula
If you want to see the whole content of a List or Object and don’t want to go through a lot of trouble, use the ENCODE_JSON formula. E.g.
ENCODE_JSON(appVars.test)in a Debug Log’s message or a Text component’s content will show you the full content of theappVars.test, no matter if it’s undefined, a text, an Object or a List of Objects. You can ENCODE_JSON anything – variables, outputs of other nodes, etc.Mobile device debugging
By default, debugging a mobile device, unless debugging is done via components on the canvas via ENCODE_JSON or similar, is much more work than debugging the web version of the app. Thus, it’s recommended to verify that the problem is only happening on mobile before attempting the debugging.
For Android, Android developer tools, e.g., adb can be used. Android Debug Bridge (adb) Â |Â Android Developers
For iOS, Apple developer tools, e.g. log can be used. Viewing Log Messages | Apple Developer Documentation
As these tools output all of the device’s logs from all of its applications in the background and foreground at once, it’s recommended to add markers you can easily search for in the beginning of the console messages.