Debugging via web inspector in p5 web editor

#1

Hello, I’m attempting to debug a p5.js sketch and, for this particular sketch it would be helpful to use the web inspector (via Chrome or Safari, for example) to track a variable’s value. Can anyone provide some pointers for how to do this with the p5 web editor? Looking at the sources view, it’s really hard to find out where to look for the sketch.js file. I’m assuming that there’s some magic going on behind the scenes to take what I type in sketch.js and make it runnable in the browser, so I’m not even sure where to look in this hierarchy (screenshot below from Chrome):

My goal is to be able to set breakpoints via the web inspector and step through the code there. Any suggestions would be most welcome!

1 Like

#2

well, i failed too, even i glimpsed that the filename could be fs-sketch.js
i did not find it.
so
i press the download button,
unzip the file, double click on “index.html”
enable the inspector, start debugger, click on a line,
and at “Watch expressions” type in a variable name to see its value.
and click on ( resume F8 ) for update it.

hope that helps, even it does not answer your question how to do it inside the online editor.

1 Like

#3

Web editor runs sketch inside a dynamically generated iframe. So you can’t access variables of a sketch in the console directly because it is not scoped with global Window object. But we can assign iframe’s window to object and access variable via new object.

First, get the iframe’s window by id. Hopefully, we know the id of the iframe :sunglasses:. Enter this line in console.

>> var sketch = document.getElementById("canvas_frame").contentWindow
<- undefined

Now you can access a variable of sketch like this,

>> sketch.mouseX
<- 354

moreover, you can also change values and see the effect inside a sketch,

sketch.x = 100; 
2 Likes