Use a step-by-step debugger to troubleshoot your transforms

Use a debugger when you need to inspect values inside a transform or transformArgs function. Breakpoints let you pause execution, view live variables, and step through the code.

Copy link to this section

Step 1: Write your transform

Start by creating a transform or transformArgs function. If you need help, see these topics:

• Use transforms to transform data for UI components
• Transform API arguments with transformArgs

Copy link to this section

Step 2: Bundle your app

Before debugging, make sure you bundle your application using the bundler in VS Code. The debugger won't find your code unless you build the app first.

Copy link to this section

Step 3: Set breakpoints in your browser

1. Open your browser’s DevTools.
2. Navigate to the Sources panel.
3. Search for your TypeScript file that implements your transform logic.
4. Set a breakpoint on the line you want to inspect.

This screenshot shows a paused breakpoint inside a transformArgs function, with variables in scope.

Copy link to this section

That’s it

Once you hit a breakpoint, use the debugger to inspect arguments, view local variables, and trace execution.