From this article, I can’t figure out whether I can perform step-by-step debugging from Figma app’s console. All I can tell is that:

a) you can type out certain specific figma nodes ie figma.currentPage to inspect their properties

b) any console.log() statements in my plugin code will appear here

What I’m looking for is the ability to execute my plugin code one line at a time, and observe which variables are set, or which events are being called. I’d like to find out if this is possible for Figma plugins?

You probably didn’t read this article to the end. It also mentions that you can run the plugin in the developer VM, add a debugger statement where you want to pause code execution, and then add breakpoints in DevTools to debug the code step by step.

Thanks, didn’t know that the Developer VM referred to the debugging options for the plugin. I also didn’t know that you should literally insert “debugger;” statement into my projects files eg ui.html or code.ts to make it work

I also didn’t know that you could mouse over variables inside the dev console in the Figma app to view their values when it pauses at the debugger statement:

As someone who’s only ever debugged using IDEs like VS Code, I totally didn’t understand the section about Developer VM. I think the point could have been brought across clearer if they included some example screenshots as well

I think you will also find the following resources useful:

Thanks, these articles are really helpful!