Introducing Debug Tools: Quickly find and fix errors in your Retool apps

Jessica Sun
Jessica Sun
Product @ Retool

Sep 1, 2022

Today we’re excited to launch Debug Tools, a faster way for developers to investigate and debug errors in their Retool apps.

Debug Tools are now available for all cloud users, and will be available in the next on-premise version.

What are Debug Tools?

When your Retool apps experience errors, you need all of the details to identify and solve the issues. Debug Tools are a set of features that give you more visibility so you can diagnose and fix these errors faster.

Our Debug Tools are designed to be immediately familiar to any developer. They’re like Chrome DevTools for Retool: you can trace the flow of data, identify dependencies between components and code, and reproduce errors in the end-user experience. They also give you the most visibility offered by any app development platform, helping you build more complex and performant apps faster.

Where to find the tools

Only editors and admins can open Debug Tools by clicking the bug icon on the right of the status bar at the bottom of every Retool app, or by using the CTRL+` keyboard shortcut. You will see Debug Tools alongside information around environments, releases, query status, and history when you’re in edit or preview mode. The status bar is not shown to end users.

The status bar is only available to editors and admins in both edit and preview modes
The status bar is only available to editors and admins in both edit and preview modes

How they work

Get notified every time there’s an error. Every error is logged to the console and includes a stack trace that makes it easy to investigate why a query was triggered, how long it ran for, and what its inputs were. No errors will fail silently.

Quickly understand the error. Dive deeper into an error in the Console tab, which displays a running log of errors, warnings, and success messages from your components and code. Every log includes a stack trace that shows the full chain of events that led to a particular message, each with a link to the related component or code.

You can also run JavaScript from the Console’s command line, allowing you to quickly inspect any property in your app (e.g., `textInput1.value`) or run API methods (e.g., `query1.trigger()`).

Console tab displays a list of errors, warnings, and success messages that relate to your queries, transformers, event handlers, etc.
Console tab displays a list of errors, warnings, and success messages that relate to your queries, transformers, event handlers, etc.

Follow the flow of data in your apps. See a timeline of events to help you debug parallel queries and visualize query sequencing. The Timeline tab shows a live view of all query runs, making it easier to see run times and quickly identify successful, failed, and active query runs.

Timeline tab shows a timeline of all query runs
Timeline tab shows a timeline of all query runs

Inspect the state of all properties including dependencies. The State tab enables you to see why queries were triggered. You can see the current state of all properties in your apps, as well as see dependencies between individual properties and calls from event handlers or JavaScript. This makes it easy to see everything that triggers a specific query. You can also jump to what you need with a “View state” context menu action and built-in search.

State tab provides a list of queries, components, and global variables used in your app
State tab provides a list of queries, components, and global variables used in your app

Get deeper insights into JavaScript errors. The Linting tab displays JavaScript errors like undefined variables and invalid JavaScript syntax. You can select any error to jump directly to the related code.

Get started

Early customers have been using Debug Tools to update and ship apps more confidently. One user, Dominic James-Moore, shares “With Debug Tools, I can quickly diagnose errors without having to go into edit mode, and debug parallel queries with the timeline view. It’s not easy to build a development environment in the browser, but Retool’s engineering really is first-class.”

Debug Tools are now available to all cloud customers, and will be available in the next on-premise version. Check out our docs to learn more, and feel free to send any feedback to jessicasun@retool.com. We’re excited to make debugging your apps quicker and easier than ever before.

Reader

Jessica Sun
Jessica Sun
Product @ Retool
Sep 1, 2022
Copied