Developer tools for Apps

The Appfarm Client features its own Developer tools (also known as DevTools). Developer tools are helpful for reviewing the state of your app at a given time, for diagnosing problems, and to fine-tune functionality, logic, and performance.

Enable the Appfarm Developer tools

To enable Developer tools in the Appfarm Client, you need to first enable client logs for that environment in Appfarm Create. To enable client logs, navigate to Environments > ENVIRONMENT > Log Options and select Enable Client Log.

Once client logs are enabled for an environment you can enable Developer tools in the Appfarm Client. There are two ways to enable Developer tools. Open an app and:

• Append ?enable_devtools=true as a query parameter to the client URL. For example: https://SOLUTION_SHORTNAME-dev.appfarm.app/APP_NAME/VIEW_NAME?enable_devtools=true, or

• Open your browser's Developer tools console and type appfarmDebug.enableDevTools().

Once enabled, the Developer tools will appear at the bottom of the screen. You can minimize Developer tools by clicking the down arrow at the top-right of the panel. They will be minimized to a button at the bottom-right which you can click to re-open. To disable the Developer tools, click the cog icon to access Developer tools settings, and click Close developer tools.

Status indicator

The Developer tools rocket icon changes color depending on the status of your app. This provides a quick indication if an issue has occurred as you develop or use an app.

• The circle around the rocket will turn orange or red if there are any warnings or errors respectively, under Logs or App Validation.

• The rocket will turn gray if Live Preview is disabled.

Panels

The functionality within the Developer tools is grouped into five panels.

Logs

The Appfarm Client generates messages when performing different operations, such as running actions. These messages are printed in the Logs panel.

The messages include:

• A data view of modified data sources.

• The payload sent when calling external APIs.

• Context data for an action, such as action params.

• Error messages from failed action nodes.

• Execution time of actions and action nodes.

App data

The App Data panel lists the data sources used in the app, along with the objects contained in those data sources and the properties that are in use in the app.

From the list of objects contained in a data source, you may right-click a row to copy the record (or all records) as JSON.

Important

App Data only lists the data sources and properties actually used in the app. If a specific property is never referenced within an app, it will not be shown in Developer tools. Use Appfarm Create to review your data model or, to get a complete picture of the data stored in the database, consider using GraphQL.

App Data FAQ #1: Why are some properties missing on the data source in Dev Tools, but are present in the object class?

Appfarm only sends metadata for properties used in the App to the client. The Dev Tools only have access to the same data as the App. Thus, properties that are not used or written to in the App will not be shown in Dev Tools.

App Data FAQ #2: Some objects are missing data for some properties, but when I check the database with GraphQL, the data is still there

Data that is displayed in Dev Tools are of properties that are needed in the App, meaning: data that is displayed in the UI, used to update other data, used in filters, conditions, functions or action nodes. We do not read data for properties that are only written to in the App. Thus, if you have a column that is only written to the property will be shown in Dev Tools but will only contain data if the object is created in the client. Those data will be removed upon refresh of the App since the App will read data from the database during a refresh.

Actions

The Actions panel lists all actions in your app with an overview of how many times they have been run. You can also set breakpoints at the action node level in order to control action execution.

Select an action to display the action nodes contained inside. Toggle a breakpoint by clicking on an action node.

If an action is executed often (such as when used in a Timer) and clutters the execution log, you may select the Action and toggle the Mute log switch to stop it from logging.

All breakpoints are displayed in a list to the right. You can activate/deactivate a breakpoint by clicking the corresponding switch in this list. This is useful if you want to retain the breakpoint for later, but deactivate it temporarily.

When an action is paused due to a breakpoint, you can choose to resume action execution, step to the next action node, or abort the action execution, by using the buttons in the toolbar.

App Validation

App Validation displays any validation warnings and errors for the app. Note that messages in this section may arise from issues out of an Appfarm Create developer's control. Please contact [e-mail] if you suspect such an issue.

Developer tools settings

This panel provides some settings and information about the Appfarm Client. Any settings changed here are stored in the browser's local storage and will continue to apply after reopening Developer tools or restarting the browser.

Client Preview Mode

Live Preview is the hot reload functionality that refreshes the app when changes are made in Appfarm Create. If you are experiencing issues, or collaborating with other developers, it can be useful to disable Live Preview.

Include Generated Data will reveal data records for system generated data sources in the App Data section of the Developer Tools. Generated data sources are created when two object classes are joined. For example, when a list of Contacts are displaying Contact.Company.Name - a join from the Contact table to the Company table occurs, and a Generated Data Source between the two is created.

Developer Tools Theme

Enable a dark theme for the Developer tools.

Share App Link

Display a QR code for opening the app.

Send Client State

If requested by Appfarm Support, you can send us your client state to help identify a potential issue.

Version Information

Details of the exact version of the Appfarm Client in use.

Close Developer Tools Panel

If you close the Developer tools, you will need to enable them again if you later wish to use it.

Advanced debugging using the browser developer tools

All browsers come with built-in developer tools, that may be used for displaying the console log of the web application, the network traffic (and simulating offline or high-latency / low bandwidth environments), and memory usage. The built-in developer tools may be used to investigate technical issues related to data handling and usage, performance, latency, timing and memory - or if you want a full view of the execution Log when running actions.

With reference to Google Chrome, here is how you may debug different scenarios.

Console Tab

The Console tab gives you a full-height view of the execution log. You may also undock the developer tool in a separate window. You may find it easier to use when doing a lot of analysis, and it works better than the Appfarm Developer Tools when debugging and simulating mobile devices in your browser at the same time.

Also, a few handy commands exist that may be typed into the console:

• appfarmDebug.enableDevTools() and appfarmDebug.disableDevTools(): To enable and disable the Appfarm Developer Tools. Typically used when debugging with logging in Production environments.

• appfarmDebug.listDataSources(): Gives you a list of all Data Sources with IDs, Name and number of objects.

• appfarmDebug.logging.enableGuiUpdateStats() and appfarmDebug.logging.disableGuiUpdateStats(): Useful if you want extended logging of what happens while rendering the UI.

Network tab

Two main use cases exist for this tab: Simulating offline of high latency / low bandwidth environments, and viewing the requests/responses (messages) from the client to the server.

The top bar (which has a default network setting No throttling) may be set to simulate Offline, Fast/Slow 3G, or custom network environment settings.

The Network tab may be used to see the timing of the messages between the client and the server. By filtering on WS (Websocket), selecting the entry to the left (refresh needed first time this is enabled), and navigate to Messages - you see details for all traffic as below:

Browser Developer Tools - Advanced Network Log

For the above example, we see the Length (bytes uploaded or downloaded) and Time (finish time for the message). By clicking the entry and expanding some sections, we see that this is the message sent when updating the property Done on an object in my Tasks Data Source. It does not state the Data Source Name, but you may look-up the dataSourceId by running appfarmDebug.listDataSources() in the Console tab.

Application tab

The Application tab may be used if you want to see the content of Cookies, or what Appfarm has stored in the Local Storage or Session Storage. You may also delete Cookies or data in Local- or Session Storage from here.