The Interactive Debugger in Anvil

The Anvil Editor has a built-in Interactive Debugger that allows you to pause execution and inspect your code in real time, both on the client and server side. It provides tools to help you quickly diagnose and fix issues in your app.

Key Features

1. Add and Remove Breakpoints: Pause code execution at specific areas in your code both on client and server side. You can also pause on server code called from the client.

2. Explore the Call Stack: Explore the call stack across client-server boundaries and inspect variables and values at runtime.

3. Step Through Code: Easily navigate through code execution across both client-side and server-side code, with the debugger tools.

4. Safe Debugging Environment: Breakpoints only activate in your Debug Environment and are ignored in published versions of your app.

5. Debug Background Tasks and HTTP Endpoints: The debugger stops at all breakpoints in your Debug Environment, including in Background Tasks and HTTP Endpoints.

How it works

When you add a breakpoint to an executable line of code in the anvil editor, and run your code, your app will work as normal until execution reaches the breakpoint (the breakpoint is hit). Here is what happens then:

1. Code execution is paused just before the line of code is executed.
2. The line of code where execution is paused (usually at a breakpoint) is highlighted, as well as its call sites. This highlight color changes depending on whether the editor is in light or dark mode
3. The Debugger Window opens, showing details of all the variables in your code, both local and global and a toolbar with various actions to help you inspect your variables and control execution.

The Debugger Window

Here is an image of the anvil editor with the Debugger Window open, showing its key components:

1. Call Stack: Displays the current line of code whose breakpoint was hit and its call stack.
2. Debugger Toolbar: Provides common debugging actions like stepping through code.
3. Object Inspector: Shows all variables in your code, including local and global scopes.

The Call Stack

The call stack displays the current call stack across client-server boundaries. Each frame in the Call Stack represents a function call site, starting from the line where execution is paused and tracing back through its call history.

Clicking on a call stack frame opens that line of code in your project and updates the variables in the Object inspector to reflect the objects within the context of that line of code. This makes it easy to navigate through the execution flow and debug effectively.

The call stack is grouped into two sections: Browser for client-side calls and Server for server-side calls, showing a clear view of the execution flow.

The Debugger Toolbar

The debugger toolbar has the following actions:

Resume: Continue executing indefinitely, or until the next breakpoint.

Restart: Stop the current process and restart your application, which will run until it encounters the first breakpoint.

Stop: Terminate the current process.

Step Over: Execute the current line of code and pause execution on the next line, whether or not it has a breakpoint.

Step Into: If this line of code is a function call, go into the function and pause at its first executable line(it will skip comments and blank lines). Otherwise, step over this line of code.

Step Out: Execute to the end of the current function and then pause.

Object Inspector

The Object inspector displays all the objects in your code. They are grouped into two categories:

1. Local Variables: These include all variables available at the point where execution is currently paused. They are specific to the function or scope currently being debugged and depend on the selected call in the call stack.
2. The Global variables: These show all other variables from the rest of your code.

You can expand and collapse variables within a particular scope by clicking on the arrow icon:

Adding and Removing Breakpoints

Breakpoints are marked by a red circle icon in the gutter of the Anvil editor. They allow you to pause execution at specific points in your code. You can add or remove breakpoints in both client and server code at any time:

• Before execution begins.
• While your code is running.
• When execution is paused.

💡 Tip: If execution is paused and you want to quickly skip to the end of a block of code, place a new breakpoint at the end of that block and click Resume . Execution will continue until it reaches the new breakpoint.

Adding Breakpoints

You can add breakpoints to any executable line of code:

1. Click the gutter next to the line of code you want to debug.
2. A red circle icon will appear, marking your breakpoint.

Removing Breakpoints

The breakpoint behaves like a toggle, clicking on a breakpoint will remove it.

Debugging Background Tasks and HTTP Endpoints

You can use the debugger to pause execution and inspect variables in Background Tasks and HTTP Endpoints within your Debug Environment.

When you add breakpoints inside a background task or an HTTP endpoint in your server modules, the debugger will pause execution at that point, just like in regular server code. This lets you step through the code and debug as needed.

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.