Debugging JavaScript

How can I debug my JavaScript code?

By leveraging the chrome dev tools (or developer tools of your browser) you can easily inspect, set breakpoints and debug JavaScript code you've written in Retool.

Finding your JavaScript code

Let's say we have a Run JS Code query named query2. The first thing we need to do is open up our developer tools.

We're going to use chrome for this example so the keybinding may differ from browser to browser, but the ideas will work.

  • To open the console in Chrome, use this keyboard shortcut: Cmd + Option + J (on a Mac) or Ctrl + Shift + J (on Windows). As an alternative, you can right-click on the webpage and click "Inspect" to open the developer console.

  • Make sure your query or transformer has run at least once since page load. This allows Retool to tell chrome to keep track of the JavaScript code and assign it to a specific file name. You will not be able to find your JavaScript unless you have run it previously.

  • Search for the file: Cmd + P (on Mac) or Ctrl + P (on Windows). Once the search bar has opened, search for {query_name}.js. For example, if I have a query named query2 in Retool I would search for query2.js.

That's it! You've successfully located your JavaScript code that Retool runs.

Debugging your JavaScript code

Once you've found the JS that Retool is running, you can use the dev tools as you normally would, including setting breakpoints by clicking on a line number. You can also write debugger in your Retool JavaScript code, which will do the same.

After you've set a breakpoint, try running your query again! Note: this breakpoint will fire anytime Retool executes this code, not just when you click Run. i.e., if this query is triggered by another query or when you select a row on a table we will also hit the breakpoint then too.

Now that we're in a broken/paused debugging state, try out the console! You should be able to execute any statement in the dev tools console that you could write in Retool's query editor.