Debug Tools
Investigate and resolve issues with Retool's built-in debugging tools.
Debug Tools are available within the App IDE, Resource configuration page, and Query Library. They enable you to troubleshoot and fix issues with Retool apps, resources, and queries.
App IDE
The status bar at the bottom of the App IDE 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.
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.
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.
Linting tab
The Linting tab displays JavaScript errors, such as undefined variables and invalid syntax. Click an error to open the code in the app to investigate and debug.
The tab also has performance lints. These lints highlight queries or components that could be degrading an app’s performance, and suggests resolutions.
Performance tab
The Performance tab compiles app statistics directly related to performance. It's a useful tool for measuring the effectiveness of optimization and refactoring improvements.
The performance score is calculated using the query stats and app size values and linearly interpolating between p50 and p95 values gathered across Retool. For example, an app that is more performant than 95% of all apps across Retool achieves a perfect score for that category.
Resource configuration page
Debug Tools for the Resource configuration page are currently being rolled out, so you might not see this feature yet.
Some resources have testing options for verifying connection settings. Supported resources include a Test connection option when you create or edit the resource.
Similarly, there are options for testing authentication settings when using Custom Auth. Not every custom auth configuration has these options, but the full list includes:
- Test auth workflow
- Test refresh auth workflow
- Check authentication status using current credentials
When you test auth workflows or connections, Retool displays a notification indicating whether the test passed or failed. Click View in console to open the Debug Tools console. The console includes detailed information, including errors, tokens, headers, URLs, etc.
If you're debugging a connection issue, see the Troubleshoot connections page for more details.
Query Library
Debug Tools for the Query Library allows you to switch between environments, which means you can test queries before using them in production. In the status bar at the bottom of the page, click on the current environment to switch to a different environment.
You can also view a query's history by clicking the Saved on text in the lower right corner. This opens a modal that shows the history, and allows you to revert to a previous version.