Debug an app
The App debugger is a panel that gives you real-time insight into your app's state while you preview it. It helps you understand why an app is not behaving as expected without using the browser developer tools.
Note: The App debugger is only available in preview mode and only for Ripple apps. It has no effect on published apps.
Open the debugger
While previewing an app, select the Debug button to show or hide the debug panel. When the panel is hidden, the debugger keeps recording information in the background.
When there are logs or network calls, a badge is shown next to the tabs. When there are active errors, an indicator reflects the error count so you can see there is a problem without opening the panel.
Panel actions
- Copy debug information to clipboard: copies all the information in the panel (logs, app state, and network calls) as JSON.
- Maximize the panel to make the tab content bigger.
Tabs
The debug panel has three tabs.
App state
The App state tab shows a tree with the current state values of your app. You can select an item to expand it and see its values. It includes:
- Components: fields (id and current value), grids (id, rows, added rows, deleted rows, edited rows, and selected rows), and file uploaders (id and files).
- Resources: id, name, type, current value, and, where available, the request status and status code.
- User: name, given name, Unit4 id, tenant id, and app id.
Network
The Network tab lists the calls made to resources during the app's execution, in chronological order. For each call you can see:
| Field | Description |
|---|---|
| Resource id | The identifier of the resource. |
| Resource type | The type of the resource. |
| Method | The HTTP method used. |
| URL | The URL of the call. |
| Request status | Whether the call succeeded. |
| Status code | The response status code. |
| Content | The payload sent in the request. |
| Response | The content received in the response. |
| ERP parameters | The resolved values of the ERP parameters. Only for ERP resources. |
| URL parameters | The resolved values of the URL parameters. Only for U4 service resources. |
Select the Clear button to empty the list.
Logs
The Logs tab shows the errors, warnings, and logs related to your app, in chronological order. Examples of the logged messages include Liquid JS errors, JSON parse errors, or reaching the maximum number of chained App containers.
Select the Clear button to empty the list.