In-editor console is out of sync with canvas and browser console

[jesse-harding]

p5.js version

1.10.0

What is your operating system?

Mac OS

Web browser and version

Chrome v129.0.6668.90

Actual Behavior

The data displayed in the in-editor console are out of sync with the canvas as well as the browser console. It looks like it might be an off-by-one error somewhere or that the in-editor console is updated last and after a delay of some sort, as I first observed it in a sketch where I had assumed I had made an off-by-one indexing error, but then made a barebones sketch to demonstrate the problem. Also, in the attached screenshots, you can see that the two consoles disagree, while the browser console is in-sync with what is being shown in the canvas.

Expected Behavior

I expect the console to be updated in synchrony with the browser console and what is being displayed in the canvas

Steps to reproduce

Steps:

1. run code 2. observe disagreement between consoles and canvas

Snippet:

function setup() {
  createCanvas(400, 400);
  frameRate(2);
}

function draw() {
  if (frameCount % 2 == 0){
    console.log("black");
    background(0);
  }
  else{
    console.log("white");
    background(255);
  }
}

[jesse-harding]

@raclim Hi there, if someone could please look into this, I'd appreciate it as it makes debugging timed events very difficult in the editor, which is not great for helping my students.

[raclim]

Hi @jesse-harding thanks for reporting this and sorry for the delay on this! I'll start looking into this and will hopefully have an update by next week.

[raclim]

After doing some digging I think this might be tied to the console-feed library, and might be related to an earlier issue with it that was reported (samdenty/console-feed#77). I think the linked fix might resolve this, but not entirely sure. I can looking into forking the library, implementing the proposed fix, and pointing it to there to see if it'll work.