Skip to content

Commit 4a740db

Browse files
feat: puya debugging support; improved source map management (#37)
* feat: wip on updating source registry assembly * chore: wip - initial drafts around refined ui * feat: initial draft on puya support changes * feat: draft support for prompting for tmpl vars * chore: adding branch based avm package * refactor: loading from txn group sources * chore: testing ci * chore: testing ci * chore: puya and teal example * chore: passing contents of the sourcemap and its containing folder * chore: removing tmpl var tweaks; importing ProgramSourceEntryFile from avm debugger * chore: refining examples structure * chore: transferring the advanced examples from avm-debug * chore: downgrading types vscode to patch npm package Fixes the error thrown during npm package invocation: ERROR @types/vscode ^1.92.0 greater than engines.vscode ^1.80.0. Either upgrade engines.vscode or use an older @types/vscode version * fix: relative path resolution in monorepos * docs: update docs url in markdown * docs: adding extra docs into readme on debugging puya * chore: update README.md Co-authored-by: Neil Campbell <neil.campbell@makerx.com.au> * docs: addressing pr comments * chore: bump debug extension to 0.3.0 * docs: update guideline to refer to v2 and v6 of utils py|ts until v7 ts is out --------- Co-authored-by: Neil Campbell <neil.campbell@makerx.com.au>
1 parent 372ee5a commit 4a740db

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+185063
-9462
lines changed

.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,5 @@ out/
6666

6767
# webdriver.io
6868
.wdio-vscode-service/
69+
70+
examples/multiRootWorkspace/.algokit/sources/sources.avm.json

.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ coverage
1010
**/generated/types.ts
1111
# don't format ide files
1212
.idea
13+
**/*sources.avm.json

README.md

+41-15
Original file line numberDiff line numberDiff line change
@@ -55,27 +55,37 @@ Before you can use the AVM Debugger extension, you need to ensure that you have
5555

5656
## Usage
5757

58-
In order to use the AVM Debugger extension, you need:
58+
The AVM Debugger extension automatically detects and operates on the following files:
5959

60-
1. TEAL Source Maps. A `*.trace.avm.json` file that maps the compiled TEAL source maps to the original source code. See an example [here](./examples/multiRootWorkspace/slot-machine/debug_traces/simulate-response.trace.avm.json).
61-
2. Simulate Traces. A `sources.avm.json` file that contains the traces obtained from algod's [`simulate` endpoint](https://developer.algorand.org/docs/get-details/dapps/smart-contracts/debugging/?from_query=simulate#simulate). This serves as an entry point for the debugger. See an example [here](./examples/multiRootWorkspace/slot-machine/.algokit/sources/sources.avm.json).
60+
1. Simulate Traces. A `*.trace.avm.json` file that contains the traces obtained from algod's [`simulate` endpoint](https://developer.algorand.org/docs/get-details/dapps/smart-contracts/debugging/?from_query=simulate#simulate). This serves as an entry point for the debugger. See an example [here](./examples/multiRootWorkspace/slot-machine/debug_traces/simulate-response.trace.avm.json).
61+
2. Source Maps. Source maps for the programs executed within the trace. These can be either a
62+
- a TEAL source map, obtained from algod when compiling a TEAL program [example](examples/multiRootWorkspace/slot-machine/.algokit/sources/contract/fake-random.teal.tok.map).
63+
- a Puya source map, produced when compiling a Smart Contract with the Puya compiler [example](examples/multiRootWorkspace/puya/ProofOfAttendance.approval.puya.map).
64+
65+
> Additionally, it maintains a file named `sources.avm.json` in the root of your project (defaults to `.algokit/sources/sources.avm.json`), which contains a mapping of the compiled source maps to the original source code.
6266
6367
### a. AlgoKit based project (recommended)
6468

65-
If you are aiming to debug TEAL code in a project generated via [`algokit init`](https://github.com/algorandfoundation/algokit-cli/blob/main/docs/features/init.md), follow the steps below:
69+
If you are aiming to debug TEAL code in a project generated via [`algokit init`](https://github.com/algorandfoundation/algokit-cli/blob/main/docs/features/init.md), follow the steps below.
70+
71+
#### Python
6672

6773
```py
6874
# Place this code in a project entry point (e.g. main.py)
6975
from algokit_utils.config import config
7076
config.configure(debug=True, trace_all=True)
7177
```
7278

79+
#### TypeScript
80+
7381
```ts
7482
// Place this code in a project entry point (e.g. index.ts)
7583
import { config } from 'algokit-utils-ts'
7684
config.configure({ debug: true, traceAll: true })
7785
```
7886

87+
> NOTE: Storing debug traces is not possible in browser environments, your contract project needs access to filesystem via `node`. If you wish to extract simulate traces manually from an app running in a browser that uses `algokit-utils-ts`, refer to [algokit-utils-ts docs](https://github.com/algorandfoundation/algokit-utils-ts/blob/main/docs/capabilities/debugging.md#debugging-in-browser-environment).
88+
7989
### b. Custom Project
8090

8191
Alternatively, if you are using `algokit-utils` in a project that is not generated via `algokit init`, refer to the following utilities:
@@ -85,6 +95,10 @@ Alternatively, if you are using `algokit-utils` in a project that is not generat
8595

8696
Depending on the language you are using, you can use the above utilities to generate `source maps` for your TEAL as well as debug `traces` obtained from algod's `simulate` endpoint (which is also an entry point for this debugger extension). Alternatively, you can use the utilities as a reference for obtaining source maps and traces without `algokit-utils`.
8797

98+
### Puya Source Maps
99+
100+
To obtain puya source maps, ensure to set the `--output-source-map` flag to `true` when compiling your smart contract with `puya` and using the latest version of the `puya` compiler.
101+
88102
### Launch Configurations
89103

90104
The extension supports the following launch configurations:
@@ -153,17 +167,29 @@ The extension also offers an interactive picker for simulation trace files. The
153167

154168
This document outlines the features supported by the AVM debugger. Screenshots and features are based on the VS Code client.
155169

156-
| Feature | Description | Screenshot |
157-
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
158-
| View transaction groups | Every execution starts with a top-level transaction group. | ![A transaction group being debugged](images/transaction%20group.png) |
159-
| Step into programs | LogicSig and application programs associated with transactions can be stepped into. Source maps show the original source code. | ![A program being debugged](images/app%20call.png) |
160-
| Step into inner transactions | The debugger can step into inner transactions spawned by an application. The entire call stack can be seen and inspected. | ![An inner transaction group being debugged](images/inner%20transaction%20group.png) |
161-
| Step-by-step debugging | Supports step into, over, out, and back. |
162-
| Breakpoint support | Breakpoints can be set in program source files. The debugger pauses when code corresponding to a breakpoint is about to be executed. | ![Breakpoints in program code](images/breakpoints.png) |
163-
| Error reporting | Execution errors are reported by the debugger. The debugger will not allow you to advance after an error, but you can step backwards to inspect what happened prior to the error. | ![An error in the debugger](images/error.png) |
164-
| Inspect program state | The debugger allows inspection of the state of the program being debugged, including the PC (program counter), stack, and scratch space. Byte arrays can be displayed in various formats. | ![Inspecting program state](images/program%20state%20variables.png) |
165-
| Watch values | Specific values can be added to the watch list. Negative indexing is supported to look up values relative to the top of the stack. | ![Watched values](images/watch%20values.png) |
166-
| Inspect application state | The debugger allows inspection and watching of any available application state from the execution. | ![Inspecting application state variables](images/app%20state%20variables%20expanded.png) |
170+
| Feature | Description | Screenshot |
171+
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
172+
| View transaction groups | Every execution starts with a top-level transaction group. | ![A transaction group being debugged](images/transaction%20group.png) |
173+
| Step into programs | LogicSig and application programs associated with transactions can be stepped into. Source maps show the original source code. | ![A program being debugged](images/app%20call.png) |
174+
| Step into inner transactions | The debugger can step into inner transactions spawned by an application. The entire call stack can be seen and inspected. | ![An inner transaction group being debugged](images/inner%20transaction%20group.png) |
175+
| Step-by-step debugging | Supports step into, over, out, and back. |
176+
| Breakpoint support | Breakpoints can be set in program source files. The debugger pauses when code corresponding to a breakpoint is about to be executed. | ![Breakpoints in program code](images/breakpoints.png) |
177+
| Error reporting | Execution errors are reported by the debugger. The debugger will not allow you to advance after an error, but you can step backwards to inspect what happened prior to the error. | ![An error in the debugger](images/error.png) |
178+
| Inspect program state | The debugger allows inspection of the state of the program being debugged, including the PC (program counter), stack, and scratch space. Byte arrays can be displayed in various formats. | ![Inspecting program state](images/program%20state%20variables.png) |
179+
| Watch values | Specific values can be added to the watch list. Negative indexing is supported to look up values relative to the top of the stack. | ![Watched values](images/watch%20values.png) |
180+
| Inspect application state | The debugger allows inspection and watching of any available application state from the execution. | ![Inspecting application state variables](images/app%20state%20variables%20expanded.png) |
181+
| Support for Puya sourcemaps | The debugger now supports Puya sourcemaps, allowing debugging of contracts written in Puya. | ![Puya sourcemap](images/puya-sources.png) |
182+
| Ability to ignore or select external sourcemaps | Users can browse and select external sourcemap files if they're not found in the workspace. Additionaly providing an option to ignore sourcemaps for specific hashes, which can be reset via the 'Clear AVM Registry' command. | ![Picker v2](images/pickerv2.png) |
183+
184+
### VSCode Commands
185+
186+
The extension provides the following commands:
187+
188+
| Name | Command | Description |
189+
| ------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
190+
| Debug AVM Trace File | extension.avmDebugger.debugOpenTraceFile | Opens a trace file for debugging. Also accessible via debug icon visible when a trace file is opened in the editor. |
191+
| Clear AVM Debug Registry | extension.avmDebugger.clearAvmDebugRegistry | Clears the AVM debug registry (contents of sources.avm.json). |
192+
| Edit AVM Debug Registry | extension.avmDebugger.editAvmDebugRegistry | Edits the AVM debug registry (contents of sources.avm.json). |
167193

168194
## How can I contribute?
169195

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!.algokit/sources/sources.avm.json
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"version": 3,
3+
"sources": [
4+
"opup.teal"
5+
],
6+
"names": [],
7+
"mappings": ";AACA"
8+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#pragma version 6
2+
int 1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"txn-group-sources": [
3+
{
4+
"sourcemap-location": "../../ProofOfAttendance.approval.puya.map",
5+
"hash": "9OQMiPyi2J20NA7qdxurd6RlJi8dTAlzNxPzdR7pjPc="
6+
},
7+
{
8+
"sourcemap-location": "opup/approval.teal.map",
9+
"hash": "p0zHRDBy7V/S2TDcAaXYEd2OF8KSxV/1y0ceYEL6qxU="
10+
}
11+
]
12+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "avm",
6+
"request": "launch",
7+
"name": "Debug Puya App",
8+
"simulateTraceFile": "${workspaceFolder}/debug_traces/simulate-response.trace.avm.json",
9+
"programSourcesDescriptionFile": "${workspaceFolder}/.algokit/sources/sources.avm.json",
10+
"stopOnEntry": true
11+
}
12+
]
13+
}

0 commit comments

Comments
 (0)