I was wondering if it’s possible to perform step-by-step debugging and data inspection from Figma app’s console as well? It would greatly speed up development if I didn’t have to type console.log every few minutes to troubleshoot
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
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