Comment on page
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.
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:
?enable_devtools=trueas a query parameter to the client URL. For example:
- Open your browser's Developer tools console and type
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.
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.
The functionality within the Developer tools is grouped into five panels.
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.
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.
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.
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.
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 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 [email protected] if you suspect such an issue.
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.
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 Sources will reveal system generated data sources in the App Data section of the Developer Tools. Generated Data Sources 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.
Enable a dark theme for the Developer tools.
Display a QR code for opening the app.
If requested by Appfarm Support, you can send us your client state to help identify a potential issue.
Details of the exact version of the Appfarm Client in use.
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.
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.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.disableGuiUpdateStats(): Useful if you want extended logging of what happens while rendering the UI.
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
Doneon an object in my
TasksData Source. It does not state the Data Source Name, but you may look-up the
appfarmDebug.listDataSources()in the Console 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.