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):
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.
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 . 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,
. Enter this line in console.