Debug Tools

Investigate and resolve app problems with Retool's built-in debugging tools.

Debug Tools, available within the App editor, enables you to troubleshoot and fix issues with Retool apps. These tools include a status bar and app state information, console log, and linting. Click the errors text in the lower right corner or press Ctrl + ` to open Debug Tools.

Debug ToolsDebug Tools

Status bar

The status bar at the bottom of the app editor displays the current environment, release, query runtime information, and the number of errors. You can click the environment to open a list of other environments to switch to. Clicking the error text in the lower right corner or pressing Ctrl + ` opens the Debug Tools.

Console tab

The Console tab is shown by default when you open the debug window. It displays a list of errors, warnings, and success messages that relate to your queries, transformers, event handlers, etc. You can also run JavaScript in the command line to help debug issues. For example, entering something like text1.value returns the text1 component's value.

Using the debug consoleUsing the debug console

Timeline tab

The Timeline tab shows a live view of all query runs. It makes it easier to visualize run times, compare sequencing, and identify failed, successful, and active queries. This feature is useful when debugging apps that run multiple queries in parallel or that chain queries together.

Viewing queries in the Timeline tabViewing queries in the Timeline tab

State tab

The State tab provides a list of queries, components, and global variables used in your app. Clicking an item in the sidebar displays more details. For example, if you select a component, you can see the current value and other property information. At the bottom of the window, it also shows the queries that component depends on. If you select a query, the components updated by that query are displayed instead.

Viewing state informationViewing state information

Linting tab

The Linting tab displays JavaScript errors, like undefined variables and invalid JavaScript syntax. When you click an error, the code opens in the app automatically so that you can debug it.

Linting tabLinting tab

Did this page help you?